guidon - est-il possible d'accéder au contexte parent dans un partiel ?

Question

J'ai un modèle de guidon qui charge un partiel pour un sous-élément.

J'aurais besoin d'accéder à une variable du contexte parent dans le modèle appelant, à partir du partiel. .. ne semble pas résoudre quelque chose à l'intérieur du partiel.

Le code simplifié est le suivant :

le modèle

    {{#each items}} 
        {{> item-template}}
    {{/each}}

le partiel

    value is {{value}}

(évidemment le vrai code est plus compliqué mais c'est le même principe, dans le cadre du partiel .. semble être indéfinie).

---

Pour montrer que c'est indéfini, j'ai utilisé une aide très simple. whatis comme ça :

Handlebars.registerHelper('whatis', function(param) {
    console.log(param);
});

et j'ai mis à jour le code ci-dessus comme suit :

modèle actualisé

    {{#each items}} 
        {{whatis ..}}  <-- Console shows the correct parent context
        {{> item-template}}
    {{/each}}

partiel actualisé

    {{whatis ..}}  <-- Console shows "undefined"
    value is {{value}}

Y a-t-il un moyen de contourner ce problème ? Est-ce que je rate quelque chose ?

EDIT : Il y a un problème en suspens concernant cette question sur le site Web de la Commission européenne. le projet github du guidon

Answer 1

Juste au cas où quelqu'un tomberait sur cette question. Cette fonctionnalité existe maintenant dans Handlebars.

Faites-le :

{{#each items}} 
    {{! Will pass the current item in items to your partial }}
    {{> item-template this}} 
{{/each}}

Answer 2

Travail de bricolage (inspiré par la pull request #385 d'AndrewHenderson sur le guidon) http://jsfiddle.net/QV9em/4/

Handlebars.registerHelper('include', function(options) {
    var context = {},
        mergeContext = function(obj) {
            for(var k in obj)context[k]=obj[k];
        };
    mergeContext(this);
    mergeContext(options.hash);
    return options.fn(context);
});

Voici comment vous devez configurer le modèle parent :

{{#each items}} 
    {{#include parent=..}}
        {{> item-template}}
    {{/include}}
{{/each}}

Et le partiel :

value is {{parent}}

Answer 3

La façon la plus simple de passer le contexte parent au partiel est de faire la boucle à l'intérieur du partiel. De cette façon, le contexte parent est passé par défaut et quand vous faites la boucle à l'intérieur du partiel, le contexte parent est passé. {{../variable}} peut accéder au contexte parent.

exemple de violon ici .

Les données

{
  color: "#000"
  items: [
    { title: "title one" },
    { title: "title two" },
  ]
}

Le modèle

<div class="mainTemplate">
  Parent Color: {{color}}
  {{> partial}}
</div>

Le partiel

<div>
  {{#each items}}
    <div style="color:{{../color}}">
      {{title}}
    </div>
  {{/each}}
</div>

Answer 4

Vous pouvez utiliser certaines des solutions proposées dans les commentaires du lien vers github :

https://github.com/wycats/handlebars.js/issues/182#issuecomment-4206666
https://github.com/wycats/handlebars.js/issues/182#issuecomment-4445747

Ils créent des helpers pour transmettre l'information au partiel.

Answer 5

J'ai créé une fonction each Helper qui inclut la clé/valeur parent dans le sous-contexte sous la clé parentContext.

http://jsfiddle.net/AndrewHenderson/kQZpu/1/

Note : Underscore est une dépendance.

Handlebars.registerHelper('eachIncludeParent', function ( context, options ) {
var fn = options.fn,
    inverse = options.inverse,
    ret = "",
    _context = [];
    $.each(context, function (index, object) {
        var _object = $.extend({}, object);
        _context.push(_object);
    });
if ( _context && _context.length > 0 ) {
    for ( var i = 0, j = _context.length; i < j; i++ ) {
        _context[i]["parentContext"] = options.hash.parent;
        ret = ret + fn(_context[i]);
    }
} else {
    ret = inverse(this);
}
return ret;

}) ;

A utiliser comme suit :

{{#eachIncludeParent context parent=this}}
    {{> yourPartial}}
{{/eachIncludeParent}}

Accédez aux valeurs du contexte parent dans votre partiel en utilisant {{parentContext.value}}