Passer les variables à travers les guidons partiellement

Les partiels des guidons prennent un deuxième paramètre qui devient le contexte pour le partiel:

 {{> person this}} 

Dans les versions v2.0.0 alpha et plus tard, vous pouvez également passer un hash de paramètres nommés:

 {{> person headline='Headline'}} 

Vous pouvez voir les tests pour ces scénarios: https://github.com/wycats/handlebars.js/blob/ce74c36118ffed1779889d97e6a2a1028ae61510/spec/qunit_spec.js#L456-L462 https://github.com/wycats/handlebars.js/ Blob / e290ec24f131f89ddf2c6aeb707a4884d41c3c6d / spec / partials.js # L26-L32

C'est très possible si vous écrivez votre propre assistant. Nous utilisons un assistant $ personnalisé pour réaliser ce type d'interaction (et plus):

 /*/////////////////////// 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) ); }); 

Dans le cas présent, voici ce que j'ai fait pour obtenir des arguments partiels. J'ai créé un petit assistant qui prend un nom partiel et un hash de paramètres qui seront transmis à la partie:

 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); }); 

La clé ici est que les assistants Handlebars acceptent un hash d'arguments Ruby-like . Dans le code helper, ils appartiennent au dernier argument- options de la fonction – dans son membre hash . De cette façon, vous pouvez recevoir le premier argument – le nom partiel – et obtenir les données après cela.

Ensuite, vous souhaitez probablement renvoyer un Handlebars.SafeString de l'assistant ou utiliser "triple-stash" – {{{ – pour éviter qu'il n'échappe deux fois.

Voici un scénario d'utilisation plus ou moins complet:

 <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> 

J'espère que cela aide … quelqu'un. 🙂

Cela peut également être fait dans les versions ultérieures du guidon en utilisant la notation key=value :

  {{> mypartial foo='bar' }} 

Permettre de passer des valeurs spécifiques dans votre contexte partiel.

Référence: Contexte différent pour le parti # 182

On dirait que vous voulez faire quelque chose comme ça:

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

Yehuda vous a déjà donné un moyen de faire cela:

 {{> person this}} 

Mais pour clarifier:

Pour donner à votre partielle ses propres données, il suffit de lui donner son propre modèle dans le modèle existant, de la manière suivante:

 {{> person this.childContext}} 

En d'autres termes, si c'est le modèle que vous donnez à votre modèle:

 var model = { some : 'attribute' } 

Ensuite, ajoutez un nouvel objet à donner à la partie:

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

childContext devient le contexte de la partie comme Yehuda a déclaré – en cela, il ne voit que le champ, mais il ne voit pas (ou s'intéresse au domaine some ). Si vous aviez un id dans le modèle de niveau supérieur et répétez l' id nouveau dans ChildContext, cela fonctionnera très bien car le partiellement ne voit que ce qui se trouve dans childContext .

La réponse acceptée fonctionne bien si vous souhaitez simplement utiliser un contexte différent dans votre partie. Cependant, il ne vous permet pas de faire référence à aucun contexte parent. Pour passer plusieurs arguments, vous devez écrire votre propre assistant. Voici un assistant actif pour Handlebars 2.0.0 (l'autre réponse fonctionne pour les versions <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) ); }); 

Ensuite, dans votre modèle, vous pouvez faire quelque chose comme:

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

Et dans votre partie, vous pourrez accéder à ces valeurs comme un contexte comme:

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

Oui, j'étais en retard, mais je peux ajouter pour assembler les utilisateurs: vous pouvez utiliser la fonction "parseJSON" helper http://assemble.io/helpers/helpers-data.html . (Découvert en https://github.com/assemble/assemble/issues/416 ).