Jsrender: Browser tidak menghormati markup template

Dibuat pada 27 Mei 2016 · 7Komentar · Sumber: BorisMoore/jsrender

<div id="alltemplates" class="hidden">
<code id="tpl_fieldtype">
    <div class="form-group">
        <label>{{:fieldname}}</label>
        <select class="fieldtype form-control" data-name="{{:fieldname}}">
            {{for allfieldtypes}}
            <option value="{{:ftype}}" {{ if ftype == fieldtype }}selected{{/if}}>{{:ftype}}</option>
            {{/for}}
        </select>
    </div>
</code>
</div>

Lihat 3 blok yang dikomentari di biola - tidak ada yang mengembalikan konten yang benar.
Tampaknya browser tidak memproses blok ini apa adanya.
Saya melihatnya sebagai:

 {{for allfieldtypes}}
    <option if}}="" }}selected{{="" fieldtype="" ftype="=" if="" {{="" value="{{:ftype}}">{{:ftype}} </option>
{{/for}}

Bagaimana cara merender template ini?

Ubuntu 15.10: Firefox 46.0.1 / Chromium 50.0.2661.102

Sumber

ba1dr

Semua 7 komentar

Anda perlu memanggil .render dengan data yang Anda butuhkan pada template.

fielddesc_tpl = $.templates('#tpl_fieldtype');

var tpl_data = {
  fieldname: 'test',
  allfieldtypes: [
    {ftype: 'ft1'},
    {ftype: 'ft2'},
    {ftype: 'ft3'},
    {ftype: 'ft4'}
  ]
}

console.log(fielddesc_tpl.render(tpl_data));

Salam Hormat.

grma1 pada 27 Mei 2016

👎1

Betulkah? Pernahkah Anda mencoba melakukan ini di jsfiddle?
Saya mendapatkan baris ini:

                <option value="ft1" {{="" if="" ftype="=" fieldtype="" }}selected{{="" if}}="">ft1</option>

ba1dr pada 27 Mei 2016

Saya akan mulai dengan menghapus spasi antara {{ dan "jika" di template Anda sehingga "jika" berbatasan langsung dengan tanda kurung kurawal (yaitu, {{if x == y}}{{:ftype}}{ {/jika}}). Browser mengonversi "jika" Anda menjadi properti tag if=""

gtwilliams03 pada 27 Mei 2016

👍1

masalah utamanya adalah, bahwa blok kode diurai oleh mesin html.

coba yang berikut ini:

<div id="alltemplates" class="hidden">
    <script type="text/x-jsrender" id="tpl_fieldtype">
        <div class="form-group">
            <label>{{:fieldname}}</label>
            <select class="fieldtype form-control" data-name="{{:fieldname}}">
                {{for allfieldtypes}}
                <option value="{{:ftype}}" {{if ftype === fieldtype}}selected{{/if}}>{{:ftype}}</option>
                {{/for}}
            </select>
        </div>
    </script>
</div>

grma1 pada 27 Mei 2016

👍1

Jika Anda melakukan ini di browser maka template Anda harus dalam tag skrip. Dan kemudian Anda perlu memanggil render dan memasukkan string yang dihasilkan ke dom.

JSRender entah bagaimana membuat browser dom memahami notasi {{tag}} itu. Anda menempatkan template di tag skrip sehingga browser akan mengabaikannya.
Kemudian Anda menggunakan javascript untuk merender template dan memasukkannya ke dalam dom yang Anda inginkan.

var model = {
Halo Dunia'
};

var rendered = $.template('#helloworld').render(model);

$('tubuh').html(dirender);

Pada 27 Mei 2016, pukul 11:55, Alexey Kolyanov [email protected] menulis:

Betulkah? Pernahkah Anda mencoba melakukan ini di jsfiddle?
Saya mendapatkan baris ini:
            <option value="ft1" {{="" if="" ftype="=" fieldtype="" }}selected{{="" if}}="">ft1</option>
—
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub, atau matikan utasnya.

Paul-Martin pada 27 Mei 2016

👍1

Terimakasih semuanya! Masalah teratasi, sebenarnya saya menggunakan tag <code> alih-alih <script> .. Bukankah html menjadi terlalu rumit? :)
Catatan tentang tag <script> harus disebutkan dalam FONT RED BOLD pada setiap halaman.

ba1dr pada 27 Mei 2016

Terima kasih semua, atas penjelasannya...

Informasi tentang blok skrip ada di beberapa tempat di dokumen: http://www.jsviews.com/#search ?s=script%20block. ( @ba1dr - Saya tidak yakin topik mana yang Anda lihat).