Melewati variabel melalui setang sebagian

Saat ini saya sedang berurusan dengan setang.js dalam aplikasi express.js. Untuk menjaga hal-hal modular, saya membagi semua templat saya menjadi parsial.

Masalah saya : Saya tidak dapat menemukan cara untuk mengirimkan variabel melalui doa parsial. Katakanlah saya memiliki sebagian yang terlihat seperti ini:

<div id=myPartial>
    <h1>Headline<h1>
    <p>Lorem ipsum</p>
</div>

Mari kita asumsikan saya mendaftarkan parsial ini dengan nama 'myPartial'. Di template lain saya kemudian bisa mengatakan sesuatu seperti:

<section>
    {{> myPartial}}
</section>

Ini berfungsi dengan baik, sebagian akan diberikan seperti yang diharapkan dan saya adalah pengembang yang bahagia. Tapi yang saya butuhkan sekarang adalah cara untuk mengirimkan variabel yang berbeda melalui permohonan ini, untuk memeriksa sebagian misalnya, apakah judul diberikan atau tidak. Sesuatu seperti:

<div id=myPartial>
    {{#if headline}}
    <h1>{{headline}}</h1>
    {{/if}}
    <p>Lorem Ipsum</p>
</div>

Dan invokasinya akan terlihat seperti ini:

<section>
    {{> myPartial|'headline':'Headline'}}
</section>

atau lebih.

Saya tahu, bahwa saya dapat mendefinisikan semua data yang saya butuhkan, sebelum saya membuat templat. Tetapi saya perlu cara untuk melakukannya seperti yang baru saja dijelaskan. Apakah ada cara yang memungkinkan?

Parsial setang mengambil parameter kedua yang menjadi konteks untuk parsial:

{{> person this}}

Di versi v2.0.0 alfa dan yang lebih baru, Anda juga bisa melewatkan hash parameter bernama:

{{> person headline='Headline'}}

Anda dapat melihat tes untuk skenario ini: https://github.com/wycats/handlebars.js/blob/ce74c36118ffed1779889d97e6a2a1028ae61510/spec/qunit_spec.js#L456-L462 https://github.com/wycats/hand.js gumpalan / e290ec24f131f89ddf2c6aeb707a4884d41c3c6d / spec / partials.js # L26-L32

Untuk jaga-jaga, inilah yang saya lakukan untuk mendapatkan argumen parsial, semacam. Saya telah membuat pembantu kecil yang mengambil nama parsial dan parameter hash yang akan diteruskan ke parsial:

Handlebars.registerHelper('render', function(partialId, options) {
  var selector = 'script[type="text/x-handlebars-template"]#' + partialId,
      source = $(selector).html(),
      html = Handlebars.compile(source)(options.hash);

  return new Handlebars.SafeString(html);
});

Kuncinya di sini adalah bahwa pembantunya Setang menerima hash argumen seperti Ruby . Dalam kode helper, mereka datang sebagai bagian dari argumen terakhir fungsi options- - di dalamnyahash anggota. Dengan cara ini Anda bisa menerima argumen pertama — nama sebagian — dan mendapatkan data setelah itu.

Kemudian, Anda mungkin ingin mengembalikan Handlebars.SafeStringdari helper atau menggunakan "triple-stash" -{{{ - untuk mencegahnya melarikan diri ganda.

Berikut ini adalah skenario penggunaan yang kurang lebih lengkap:

<script id="text-field" type="text/x-handlebars-template">
  <label for="{{id}}">{{label}}</label>
  <input type="text" id="{{id}}"/>
</script>

<script id="checkbox-field" type="text/x-handlebars-template">
  <label for="{{id}}">{{label}}</label>
  <input type="checkbox" id="{{id}}"/>
</script>

<script id="form-template" type="text/x-handlebars-template">
  <form>
    <h1>{{title}}</h1>
    {{ render 'text-field' label="First name" id="author-first-name" }}
    {{ render 'text-field' label="Last name" id="author-last-name" }}
    {{ render 'text-field' label="Email" id="author-email" }}
    {{ render 'checkbox-field' label="Private?" id="private-question" }}
  </form>
</script>

Semoga ini bisa membantu ... seseorang. :)

Ini sangat mungkin jika Anda menulis pembantu Anda sendiri. Kami menggunakan $pembantu khusus untuk menyelesaikan jenis interaksi ini (dan banyak lagi):

/*///////////////////////

Adds support for passing arguments to partials. Arguments are merged with 
the context for rendering only (non destructive). Use `:token` syntax to 
replace parts of the template path. Tokens are replace in order.

USAGE: {{$ 'path.to.partial' context=newContext foo='bar' }}
USAGE: {{$ 'path.:1.:2' replaceOne replaceTwo foo='bar' }}

///////////////////////////////*/

Handlebars.registerHelper('$', function(partial) {
    var values, opts, done, value, context;
    if (!partial) {
        console.error('No partial name given.');
    }
    values = Array.prototype.slice.call(arguments, 1);
    opts = values.pop();
    while (!done) {
        value = values.pop();
        if (value) {
            partial = partial.replace(/:[^\.]+/, value);
        }
        else {
            done = true;
        }
    }
    partial = Handlebars.partials[partial];
    if (!partial) {
        return '';
    }
    context = _.extend({}, opts.context||this, _.omit(opts, 'context', 'fn', 'inverse'));
    return new Handlebars.SafeString( partial(context) );
});

Ini juga dapat dilakukan di versi setang nanti menggunakan key=valuenotasi:

 {{> mypartial foo='bar' }}

Mengizinkan Anda memberikan nilai spesifik ke konteks parsial Anda.

Referensi: Konteks berbeda untuk parsial # 182

Jawaban yang diterima berfungsi dengan baik jika Anda hanya ingin menggunakan konteks yang berbeda di sebagian Anda. Namun, itu tidak membiarkan Anda referensi salah satu konteks induk. Untuk menyampaikan banyak argumen, Anda harus menulis pembantu Anda sendiri. Berikut ini adalah penolong yang berfungsi untuk Setang 2.0.0(jawaban lain berfungsi untuk versi <2.0.0):

Handlebars.registerHelper('renderPartial', function(partialName, options) {
    if (!partialName) {
        console.error('No partial name given.');
        return '';
    }
    var partial = Handlebars.partials[partialName];
    if (!partial) {
        console.error('Couldnt find the compiled partial: ' + partialName);
        return '';
    }
    return new Handlebars.SafeString( partial(options.hash) );
});

Kemudian di templat Anda, Anda dapat melakukan sesuatu seperti:

{{renderPartial 'myPartialName' foo=this bar=../bar}}

Dan sebagian Anda akan dapat mengakses nilai-nilai itu sebagai konteks seperti:

<div id={{bar.id}}>{{foo}}</div>

Kedengarannya Anda ingin melakukan sesuatu seperti ini:

{{> person {another: 'attribute'} }}

Yehuda sudah memberi Anda cara untuk melakukan itu:

{{> person this}}

Tetapi untuk memperjelas:

Untuk memberikan sebagian data Anda sendiri, berikan saja modelnya sendiri di dalam model yang ada, seperti:

{{> person this.childContext}}

Dengan kata lain, jika ini adalah model yang Anda berikan ke template Anda:

var model = {
    some : 'attribute'
}

Kemudian tambahkan objek baru untuk diberikan kepada parsial:

var model = {
    some : 'attribute',
    childContext : {
        'another' : 'attribute' // this goes to the child partial
    }
}

childContextmenjadi konteks parsial seperti kata Yehuda - dalam hal itu, ia hanya melihat bidang another, tetapi tidak melihat (atau peduli dengan bidang some). Jika Anda memiliki idmodel tingkat atas, dan ulangi idlagi di childContext, itu akan berfungsi dengan baik karena sebagian hanya melihat apa yang ada di dalamnya childContext.

Ya, saya terlambat, tetapi saya dapat menambahkan untuk pengguna Assemble : Anda dapat menggunakan buil-in "parseJSON"helper http://assemble.io/helpers/helpers-data.html . (Ditemukan di https://github.com/assemble/assemble/issues/416 ).

Tidak yakin apakah ini membantu, tetapi inilah contoh templat Templat dengan parameter dinamis yang diteruskan ke parsial RadioButtons inline dan klien (peramban) merender tombol radio dalam wadah.

Untuk penggunaan saya ini diberikan dengan Setang di server dan memungkinkan klien menyelesaikannya. Dengannya alat formulir dapat menyediakan data sebaris di dalam Setang tanpa bantuan.

Catatan: Contoh ini membutuhkan jQuery

{{#*inline "RadioButtons"}}
{{name}} Buttons<hr>
<div id="key-{{{name}}}"></div>
<script>
  {{{buttons}}}.map((o)=>{
    $("#key-{{name}}").append($(''
      +'<button class="checkbox">'
      +'<input name="{{{name}}}" type="radio" value="'+o.value+'" />'+o.text
      +'</button>'
    ));
  });
  // A little test script
  $("#key-{{{name}}} .checkbox").on("click",function(){
      alert($("input",this).val());
  });
</script>
{{/inline}}
{{>RadioButtons name="Radio" buttons='[
 {value:1,text:"One"},
 {value:2,text:"Two"}, 
 {value:3,text:"Three"}]' 
}}