Handlebars.js: Setang tidak berfungsi di meja

Untuk apa nilainya, jika tag {{each}} ditempatkan di luar tabel, tag lainnya berfungsi. Ini tentu saja memiliki efek yang tidak diinginkan jika menduplikasi tabel berulang kali, tetapi mungkin ini membantu mempersempit masalah:

http://jsfiddle.net/cwYhN/6/

Ini sepertinya masalah dengan jQuery atau yang lainnya... ketika Anda melakukan console.log(frag); Anda melihat bahwa {{#each}} helper didorong keluar dari tabel bahkan sebelum mencoba mengompilasinya dengan setang ...

Saya memperbarui jsfiddle untuk meletakkan templat di dalam tag <script type="text/x-handlebars-template"></script> dan tampaknya berfungsi dengan baik ...

http://jsfiddle.net/doowb/6GdPy/1/

Ya, saya sendiri baru mengetahuinya:
http://jsfiddle.net/cwYhN/10/

Untuk apa nilainya, saya pikir itu adalah browser yang membuang apa yang dianggapnya sebagai html yang tidak valid, daripada cacat jquery.

Ya, saya tidak yakin apakah itu hal jQuery atau fungsi browser asli yang dipanggil jQuery. Either way, itu tidak suka {{ }} antara tbody dan tr .

Alangkah baiknya jika setang dibangun dengan cara tertentu untuk beroperasi dalam batasan ini. Misalnya, dapat menempatkan "setiap" di dalam tag sambil memiliki pemahaman implisit bahwa ia mengulangi konten tag. Saya mungkin membayangkan itu terlihat seperti:

<table>
  <tbody handlebars="{{each}}">
    ... these get iterated ...
  </tbody>
</table>

Mengizinkan sesuatu seperti ini akan mencegah browser menghapus setiap pernyataan penting, dan itu bisa mendukung tag penutup yang menjadi miliknya (/ tbody)

Seperti yang telah Anda singgung, pengurai HTML bingung dengan markup setang dan muncul dengan ini sebagai struktur DOM yang Anda coba konversi ke templat setang:

            {{#each activity}}

            {{/each}}
        <table style="border:1px solid #ccc;">
        <thead>
            <tr><th>Month</th>
            <th>Imps</th>
            <th>Clicks</th>
            <th>Spend</th>
        </tr></thead>
        <tbody><tr>
                <th>{{month}}</th>
                <td>{{impressions}}</td><td>{{clicks}}</td><td>{{spend}}</td>
            </tr></tbody>
    </table>

Harus menggunakan sesuatu seperti perilaku skrip di atas, string javascript, atau prakompilasi untuk mengatasi ini.

Menutup ini karena masalah ini lebih merupakan detail implementasi browser daripada bug di setang itu sendiri.

Hanya menyia-nyiakan setengah hari sebelum mengetahui bahwa {{#each}} tidak berfungsi di tabel. Akan sangat membantu jika ini hanya dinyatakan dalam dokumentasi.

Masing-masing berfungsi dengan baik di tabel jika dimuat dengan benar. Bagaimana Anda memuat template Anda?

@preichelt Anda harus memuat setang dari dalam tag skrip untuk mencegah browser mengacaukan {{#each}} dalam tabel. Anda dapat membaca lebih lanjut tentang stack overflow:

http://stackoverflow.com/questions/15386276/why-should-we-wrap-our-templates-inside-script-blocks

Bug ini menghabiskan dua jam hidup saya dan sekarang jam 10:30 malam pada hari Sabtu, saya bekerja di kantor saya hanya untuk menyelesaikan bug ini sampai saya menemukan masalah ini dan [Resmi Blok Doc]
(http://handbarsjs.com/builtin_helpers.html) tidak mengatakan apa-apa tentang itu.

Jika tidak jelas, ini bukan kesalahan setang, tetapi kesalahan Anda karena tidak mengetahui cara kerja HTML: https://html.spec.whatwg.org/multipage/syntax.html#an -introduction-to-error -penanganan-dan-kasus-aneh-dalam-parser

Jadi, Anda menganggap semua orang yang mencoba menggunakan Handlebarsjs harus memiliki pemahaman yang baik tentang cara kerja parser HTML? Dan jika tidak, maka _salah pengguna_, bukan kesalahan kejelasan dokumentasi? Asumsi ini tidak masuk akal. Mesin templat lain yang berat dan kompleks, Angularjs, menggunakan sintaks yang kompatibel dengan Html sebagai sintaks templatnya, misalnya, jika saya perlu mengulang tabel, saya dapat menggunakan

<tr ng-repeat="dto in tableData">

Dan Angularjs menjaga status loop internal dengan menggunakan komentar Html:

<!-- ngRepeat: column in row -->
<tr ng-repeat="dto in tableData">

Angualrjs mencoba untuk menghormati dan mengikuti sintaks Html sebanyak mungkin dan menghindari asumsi dengan sukses. Tapi sintaks template Handlebarsjs tidak sehingga memperlihatkan masalah parser Html kepada pengguna.
Jika pengembang Anda tidak dapat menyelesaikan masalah di pihak Anda dan kemudian Anda memiliki _tugas_ untuk memberi tahu pengguna Anda agar menyadari masalah tersebut jika Anda benar-benar peduli dengan proyek Anda dan pengguna Anda dari seluruh dunia.
Bagaimanapun, saya akan membuka masalah dokumen karena _ Saya yakin saya bukan orang pertama yang menemukan masalah sakit kepala ini dan saya tidak akan menjadi yang terakhir. _

Angular berjalan di DOM, jadi DOM sadar. Handlebars bekerja dengan string saja dan tidak memiliki konsep DOM.

@profullstack : Seperti yang dikatakan @stevenvachon , Handlebars tidak berfungsi dengan HTML, tetapi hanya dengan teks. Tapi ini mungkin tidak jelas dari dokumen, karena semua contoh adalah HTML. Secara pribadi menggunakannya juga untuk menghasilkan penurunan harga ...

Jika Anda dapat memberi tahu saya, jenis teks apa yang Anda perlukan dalam dokumen, saya akan dengan senang hati menambahkannya. Namun, petunjuk penggunaan umum (termasuk bagian dengan tag <script> - sudah ada di halaman utama http://handbarsjs.com/. Itu sebabnya saya tidak yakin apa kebutuhan Anda ada di sini.

@profulstack Saya mengerti bahwa Anda frustrasi karena "membuang-buang waktu", tetapi menurut saya, Anda benar-benar mundur.

Tidak ada proyek sumber terbuka atau kontributor yang berkewajiban kepada Anda. Alat seperti setang dibuat dan dipelihara secara gratis dan hampir tanpa terima kasih, untuk mencoba membuat hidup pengembang lain lebih mudah. Jika Anda tidak dapat menggunakan proyek sumber terbuka apa pun, berapa lama waktu yang dibutuhkan untuk pekerjaan Anda?

Saya dapat memberi tahu Anda, secara langsung, bahwa datang dan menulis komentar dengan nada seperti ini akan memiliki kebalikan dari efek yang diinginkan . Wortel vs tongkat sederhana, jika Anda ingin seseorang melakukan sesuatu untuk Anda, mintalah dengan baik atau lebih baik naikkan PR dan lakukan sendiri.

@ErisDS Terima kasih atas saran Anda. Mungkin komentar pertama saya terlalu kuat, tetapi saya sangat setuju dengan pendapat Anda tentang:

to try to making other developers lives easier

Dan mengapa saya menjatuhkan Angularjs untuk menggunakan Handlebarsjs? _Karena saya percaya Handlebarsjs akan membuat hidup saya lebih mudah daripada Angularjs._
Jadi, silakan tambahkan beberapa kata pemberitahuan dalam dokumentasi untuk membantu ribuan pengguna open source Anda untuk menghindari potensi masalah yang bertentangan dengan keinginan Anda untuk "membuat hidup pengembang lain lebih mudah"? Saya kira itu tidak.
Untuk:

No open source project nor contributor has any duty to you.

Ya itu benar. Anda dapat memulai proyek open source dan kemudian menjatuhkannya, itu benar-benar OK. Tetapi ketika proyek Anda berkembang, Anda menghabiskan lebih banyak waktu dan hati untuk proyek Anda, Anda lebih mencintai proyek Anda dan Anda juga ingin membaginya dengan dunia. Saat ini Anda akan mulai _peduli dengan pengguna Anda_ dan _peduli dengan dokumentasi Anda_. Handlebarsjs berada pada tahap ini, ini bukan proyek kecil, ini adalah proyek populer dan digunakan oleh programmer di seluruh dunia, bahkan di Korea Selatan, di Cina, dan sebagainya.
Sejauh yang saya tahu, sebagian besar programmer open source di Github bangga dengan proyek mereka dan file README.md mereka, dan berharap semakin banyak orang menggunakan alat dan kode mereka.
Jadi jika:

• Anda tidak ingin peduli dengan pengguna open source Anda
• Saya orang terakhir yang akan menemukan masalah ini
  Anda benar-benar dapat mengabaikan analisis teknis saya di komentar pertama dan diskusi ramah pengguna di komentar ini.
  Selain itu, proyek open source bukanlah sesuatu seperti _charity_ yang Anda berikan kepada dunia, ini adalah _jembatan komunikasi_ antara Anda dan programmer lain.

@nknapp Terima kasih atas balasan Anda.
Mungkin komentar pertama saya terlalu kuat dan saya minta maaf untuk itu dan kepada orang-orang yang membaca komentar saya.
Dari pandangan pertama, Handlebars bekerja seperti _a text replacement tool_ dan sangat mudah untuk dimengerti. Jadi ketika saya menulis sesuatu seperti ini:

{{#each myListData}}
                        <tr>{{name}}</tr>
{{/each}}

Jika itu hanya penggantian, saya akan mengharapkan sesuatu seperti ini:

<tr>nameA</tr>
<tr>nameB</tr>

Tetapi ketika menemukan HTML, ia berperilaku sesuatu yang berbeda, dan itu karena parser HTML asli seperti yang dicatat oleh @stevenvachon .
Jadi saya kira hanya satu kalimat yang cukup di bawah bagian "The each block helper":

WARNING: please use script block when you try to use #each block inside table, due to the know issue of [How HTML parse works(thanks for <strong i="18">@stevenvachon</strong>'s reference](https://html.spec.whatwg.org/multipage/syntax.html#an-introduction-to-error-handling-and-strange-cases-in-the-parser)

Saya sangat menghargai jika Anda mau membagikan pendapat Anda. Terima kasih.

Masalahnya, ini tidak ada hubungannya dengan #each -helper. Anda seharusnya tidak pernah menulis template langsung ke HTML. Pernyataan seperti ini seharusnya ada di halaman utama, tetapi pertanyaannya adalah: Apakah Anda pernah membacanya di sana?

Mungkin kami bisa memberi peringatan seperti Anda di bawah contoh di halaman arahan...

Hanya catatan lain:

Saya tidak akan menggunakan metode blok-skrip dalam produksi. Sebagai gantinya saya akan menggunakan Webpack atau alat lain untuk mengkompilasi template terlebih dahulu.

@nknapp Ya, saya kira pendapat Anda benar: kita tidak boleh menulis template langsung ke HTML. Jadi saya kira di halaman arahan, bagian "Memulai" pertama harus menggunakan skrip sebagai contoh dan di blok abu-abu di bawah ini, kita dapat mengubah

You **can** deliver a template to the browser by including it in a <script> tag.

ke

You **should always** deliver a template to the browser by including it in a <script> tag.

Saya kira saran Anda:

**never** write a template directly into HTML

sepenuhnya benar, dan harus diletakkan di halaman arahan agar semua orang mengikuti ini dan itu dapat menghindari banyak masalah. Kurasa itu ide yang bagus, menurutmu begitu?

Namun, penjelasan itu tidak berhasil, karena mereka mungkin memahaminya sebagai:

<script type="text/x-handlebars">
  {{#each list as |item|}}
    <td>{{item}}</td>
  {{/each}}
</script>

@stevenvachon Ya, hanya menempatkan templat di dalam skrip tidak cukup dalam contoh Anda, mungkin kami perlu menambahkan lebih banyak catatan tentang cara yang benar untuk menggunakan templat, kami ingin mendengar saran Anda tentang ini.

Mungkin:

Untuk sebagian besar aplikasi produksi, Anda tidak akan ingin menggunakan templat parser dan string. Lihat ke dalam prakompilasi.

@stevenvachon Terima kasih atas komentar Anda dan saya kira akan lebih baik jika kami menempatkan tautan parser HTML Anda bersama dengan komentar Anda:

Untuk sebagian besar aplikasi produksi, Anda tidak akan ingin menggunakan templat parser dan string. Lihat ke dalam prakompilasi. Ada beberapa masalah yang diketahui jika Anda menggunakan template langsung ke HTML, misalnya, #each block helper tidak akan berfungsi di dalam tabel karena cara kerja parser HTML.

Itu mungkin harus dibagi menjadi

1. Tepat di bawah <script> -tag contoh

Anda harus meletakkan template di dalam tag <script> . Jangan memasukkannya ke dalam HTML secara langsung atau pengurai HTML dapat memodifikasinya (misalnya, jika berisi tabel )

1. Ubah poin-poin tentang prakompilasi menjadi.

Harap dicatat bahwa pendekatan ini tidak disarankan untuk aplikasi produksi. Dimungkinkan juga untuk mengkompilasi template Anda terlebih dahulu. [...]

Sebenarnya, saya pribadi tidak akan menggunakan Handlebars di browser lagi: Ada banyak framework lain di luar sana (tidak hanya Angular dan React, tetapi juga Vue dan Ractive). Video ini cukup keren dan menunjukkan masalah ...

Saya menggunakan Handlebars di server dan sebagai generator halaman statis, tetapi untuk rendering browser, saya pikir ada cara yang lebih baik.

@nknapp Saya mulai menulis handlebars-html-parser untuk digunakan membawanya ke browser melalui VDOM, tetapi menemui resistensi .

@nknapp Terima kasih atas balasan Anda. Komentar Anda meliputi:

1. Pentingnya menempatkan template di dalam a

@profullstack Saya bukan pengelola proyek ini.

Saya telah membuat perubahan.

@nknapp Terima kasih, saya yakin banyak orang akan mendapat manfaat dari perubahan Anda.

Saya tahu masalah ini sudah cukup lama, tetapi saya mengalami ini baru-baru ini karena editor template email Sendgrid tidak mengikuti praktik terbaik ini. Jika ada orang lain yang mengalami masalah ini dari Google karena alasan itu, solusinya adalah menempatkan kode setang dalam komentar HTML.

<table >
  <tbody>
    <!-- {{#each items}} -->
    <tr>
      <td>{{this.key}}</td>
      <td>{{this.value}}</td>
    </tr>
    <!-- {{/each}} -->
  </tbody>
</table>

yang menghasilkan output berikut:

<table>
  <tbody>
    <!--  -->
    <tr>
      <td>my key</td>
      <td>my value</td>
    </tr>
    <!--  -->
    <!--  -->
    <tr>
      <td>my key 2</td>
      <td>my value 2</td>
    </tr>
    <!--  -->
  </tbody>
<table>

(CATATAN: Saya belum memverifikasi ini dengan Handlebars secara langsung, hanya di editor template Sendgrid)

Terima kasih atas tipnya @gurpreetatwal . Anda menyelamatkan saya berjam-jam men-debug malam ini dengan berita gembira untuk SendGrid!

@gurpreetatwal tapi kenapa?

@Lazarencjusz mengapa dalam hal mengapa perbaikan berfungsi atau mengapa editor templat email SendGrid tidak berfungsi dengan benar?

Hai! Saat Anda menggunakan elemen div alih-alih tabel, akan berfungsi.
Juga tulis ulang semua elemen tabel ke div.

Solusi @gurpreetatwal berfungsi untuk saya di templating Mailchimp/Mandrills untuk setang. Terima kasih telah menyelamatkan saya dari banyak masalah!