Teruskan JSON yang dikembalikan dari Handlebars Helper sebagai parameter ke Handlebars Partial

Saya ingin menyiapkan sebagian untuk merender modal yang umum dan dapat disesuaikan. {{> myModal }}.

Saya ingin menyesuaikan modal dari tampilan panggilan dengan mengirimkan objek.

Saya telah mencoba pendekatan seperti yang direkomendasikan di sini: Melewati array objek menjadi sebagian - handlebars.js

Ini kode saya dari dalam tampilan yang memanggil sebagian:

{{# getJsonContext '
    {
        "id": "deleteModal",
        "title": "Are you sure?",
        "formId": "delete-form",
        "body": "Press Yes to delete this record.  Press No to cancel."
    }
'}}

    {{> myModal this }}

{{/ getJsonContext }}

Inilah pembantu saya:

getJsonContext: function(data, options) {
        console.log(data);                     <-- The result is correct.
        let jsonReturn = JSON.parse(data);
        console.log(jsonReturn.title);         <-- The result is correct.
        return jsonReturn;
},

Ini sebagian saya:

<div class="modal fade" id="{{ id }}">
  <div class="modal-dialog">
    <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header bg-light">
            <h4 class="modal-title">{{ title }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Form -->
        <form id="{{ formId }}" method="post">

            <!-- Modal body -->
            <div class="modal-body">
                {{ body }}
            </div>

            <!-- Modal footer -->
            <div class="modal-footer rounded-bottom bg-light">

            </div>

        </form>

    </div>
  </div>
</div>

Saya mengharapkan tampilan sebagian untuk merender modal yang disesuaikan.

Sebagian sepertinya tidak ditampilkan sama sekali. Saat saya "Melihat Sumber Halaman" di browser, menggantikan semua sebagian <html>, yang ditampilkan hanyalah [object Object].

Jika saya menempatkan {{> myModal this}} di luar helper, "Lihat Sumber Halaman" menampilkan semua <html>, modal tetapi tentu saja, id, judul, formId, dan isi semuanya kosong (null).


handlebars.js partial
person Jeff Matthews    schedule 10.12.2017    source sumber
comment
Lihat lagi getJsonContext pembantu dalam jawaban yang Anda rujuk. Ada perbedaan yang sangat besar antara return options.fn(JSON.parse(data)); dalam contoh itu dan pernyataan return di contoh Anda.   -  person 76484    schedule 11.12.2017

Jawaban (1)


arrow_upward
0
arrow_downward

Setelah memutar otak dengan banyak trial and error dan penelitian, akhirnya saya menemukan masalahnya. Saya harus meneruskan JSON sebagai parameter bernama dalam panggilan tampilan utama ke parsial. Sintaksnya seharusnya:

{{> jeff-modal <anyVariableName> = getJsonContext }}

Saya menyelesaikannya dan membuat {{> jeff-modal }} generik saya menerima daftar tombol, yang dapat disesuaikan.

Modal sekarang berguna sebagai modal sederhana yang umum, dapat disesuaikan, yang dapat dirender sebagai sebagian dari dalam tampilan apa pun untuk mengharuskan pengguna menekan salah satu dari x-number tombol untuk membuat pilihan.

Contoh

Tampilan utama (panggilan) memiliki daftar entri jurnal (transaksi) dalam urutan tanggal. Untuk setiap transaksi, terdapat ikon "hapus" yang dapat diklik. Modal terbuka ketika pengguna menekan ikon. Saat modal dibuka, kita perlu mengetahui transaksi mana yang akan dihapus. Kami memiliki _id-nya.

Setelah menyiapkan tabel dan kolom di <html> dan memulai iterator {{# each }}, berikut adalah cara ikon "hapus" diatur untuk setiap transaksi. Perhatikan bagaimana nilai data-id diatur ke properti _id transaksi:

<!-- table stuff up here -->

{{# each transactions}}    

  <tr class="journal-entry-row">

  <!-- some `<td>`'s -->

     <span class="journalData">
       <a href='/id#' class="open-deleteDialog"
                data-id="{{this._id}}" data-backdrop="static"
                data-toggle="modal" data-target="#deleteModal">

                     <span class="material-icons md-24 md-dark">delete</span>

       </a>
     </span>

  <!-- more table stuff -->

{{/ each }}

Ikon material di atas dapat ditemukan di sini: https://material.io/icons/

"hapus" adalah tempat sampah.

Di bawah ini adalah javascript untuk mengatur onclick untuk semua tong sampah. Perhatikan bagaimana _id transaksi melakukan perjalanan dari <html> ke javascript melalui data-id (di atas). (Saya pikir itu cukup pintar, siapa pun yang memikirkannya.)

Selain itu, karena modal khusus kita diberi id dari "hapus-formulir", kita bisa membuatnya menyetel modal <form> action.

Terakhir, sedikit CSS ditambahkan untuk menyorot baris yang dihapus.

$(document).on("click", ".open-deleteDialog", function () {

     var myTransactionId = $(this).data('id');

     // Set form action to call delete with _id parameter
     $("#delete-form").attr("action", "/transaction/delete?_id=" + myTransactionId );

     // Highlight the selected row.
     $(this).closest(".journal-entry-row").addClass("table-warning");

});

Sekarang, mari kembali ke tampilan panggilan setelah akhir <table>. Di sinilah modal dipanggil dalam blok pembantu setang (tetapi hanya ketika tempat sampah diklik):

<!-- The Delete modal -->
{{# getJsonContext '
    {
        "id": "deleteModal",
        "title": "Are you sure?",
        "formId": "delete-form",
        "body": "Press \"Yes\" to delete this record.  Press \"No\" to cancel.",
        "buttons":
            [
                { "type": "submit", "onclick": "", "class": "btn btn-primary", "text": "Yes" },
                { "type": "button", "onclick": "removeHighlightEffect()", "class": "btn btn-secondary", "dataDismiss": "modal", "text": "No" }
            ]
    }'
}}

    {{> jeff-modal options = getJsonContext }}

{{/ getJsonContext }}

Inilah pembantunya:

getJsonContext: function(data, options) {
        let jsonReturn = options.fn(JSON.parse(data));
        return jsonReturn;
},

Terakhir, sebagian {{> jeff-modal }}:

<div class="modal fade" id="{{ id }}">
   <div class="modal-dialog">
     <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header bg-light">
            <h4 class="modal-title">{{ title }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Form -->
        <form id="{{ formId }}" method="post">

            <!-- Modal body -->
            <div class="modal-body">
                {{ body }}
            </div>

            <!-- Modal footer -->
            <div class="modal-footer rounded-bottom bg-light">
                {{# each buttons }}
                    <button type = "{{ type }}" onclick = "{{ onclick }}" class = "{{ class }}" data-dismiss = "{{ dataDismiss }}" >{{ text }}</button>
                {{/ each }}
            </div>

        </form>

     </div>
   </div>
</div>

Saya tidak yakin apakah saya dapat memanggil beberapa contoh modal ini dari tampilan yang sama dengan judul, isi, tombol yang berbeda, dll. Beberapa penyesuaian mungkin diperlukan untuk itu, dan saya tidak akan mengkhawatirkannya sampai diperlukan.

person Jeff Matthews    schedule 11.12.2017