152 votes

En passant les variables à guidon partielle

Je suis en train de traiter avec handlebars.js dans un express.js application. Pour garder les choses modulaire, je divise toutes mes modèles dans des partiels.

Mon problème: je ne pouvais pas trouver un moyen de faire passer des variables par le biais d'un partiel d'invocation. Disons que j'ai un partiel qui ressemble à ceci:

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

Supposons je l'ai enregistré cette partielle avec le nom "myPartial'. Dans un autre modèle, je peux alors dire quelque chose comme:

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

Cela fonctionne bien, le partiel sera rendu comme prévu et je suis un développeur heureux. Mais ce que j'ai maintenant besoin, c'est une façon de transmettre les différentes variables à travers cet appel, vérifier dans un partiel par exemple, si un titre est donné ou pas. Quelque chose comme:

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

Et le invokation devrait ressembler à quelque chose comme ceci:

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

ou donc.

Je sais que je suis capable de définir toutes les données dont j'ai besoin, avant de me rendre un template. Mais j'ai besoin d'un moyen de le faire, comme vient de l'expliquer. Est-il possible?

238voto

Yehuda Katz Points 18277

Partiels de guidon prennent un deuxième paramètre qui devient le cadre pour le partiel :

Vous pouvez voir le test de ce scénario : https://github.com/wycats/handlebars.js/blob/ce74c36118ffed1779889d97e6a2a1028ae61510/spec/qunit_spec.js#L456-L462

19voto

Vlad GURDIGA Points 423

Juste au cas où, voici ce que j'ai fait pour passer partielle arguments, sorte de. J'ai créé une petite aide qui prend un nom partiel et un hachage de paramètres qui seront passés à la partielle:

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 chose à retenir, c'est que le Guidon aides accepter un Rubis-comme le hachage des arguments. Dans l'aide de code qu'ils viennent dans le cadre de la fonction du dernier argument-options- en hash membre. De cette façon, vous pouvez recevoir le premier argument le nom partiel-et d'obtenir les données par la suite.

Alors, vous voulez sans doute de revenir un Handlebars.SafeString de l'aide ou de l'utilisation de "triple‑stash"-{{{- pour l'empêcher de double échappement.

Voici une liste plus ou moins complète scénario d'utilisation:

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

Espérons que cela aide ...quelqu'un. :)

17voto

leaf dev Points 2586

Cela peut aussi être fait dans les versions ultérieures du guidon à l’aide de la `` la notation :

Vous permettant de passer des valeurs spécifiques à votre contexte partielle.

Référence : contexte différent pour partiel #182

15voto

Jesse Houchins Points 101

C’est tout à fait possible si vous écrivez votre propre assistant. Nous utilisons une coutume `` helper pour accomplir ce type d’interaction (et plus) :

3voto

user2166908 Points 1

Oui, j’étais en retard, mais je peux ajouter pour assembler les utilisateurs : vous pouvez utiliser buil-dans `` d’assistance http://assemble.io/helpers/helpers-data.html. (Découvert en https://github.com/assemble/assemble/issues/416).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X