web-dev-qa-db-ja.com

ハンドルバー-部分的に親コンテキストにアクセスできますか？

サブ要素のパーシャルをロードするハンドルバーテンプレートがあります。

呼び出しテンプレートの親コンテキストから、パーシャル内から変数にアクセスする必要があります。 ..は、パーシャル内の何にも解決されないようです。

簡略化されたコードは次のようになります。

テンプレート

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

パーシャル

    value is {{value}}

（明らかに実際のコードはより複雑ですが、部分的な..は未定義のようです。

未定義であることを示すために、次のような非常に単純なヘルパーwhatisを使用しました。

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

上記のコードをこれに更新しました：

更新されたテンプレート

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

更新された部分的

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

その問題を回避する方法はありますか？何か不足していますか？

EDIT：handlebars 'githubプロジェクト でこの質問に関連する未解決の問題があります

javascripttemplateshandlebars.js
57
Ben

誰かがこの質問に出くわした場合に備えて。この機能は現在、ハンドルバーに存在します。

これを行う：

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

作業フィドル（AndrewHendersonによるハンドルバープルリクエスト＃385に触発） 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);
});

親テンプレートの設定方法は次のとおりです。

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

そして、部分的な：

value is {{parent}}
22
pward123

2.0.0partialsは値の受け渡しをサポートするようになりました 。

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

これを見つけるのにしばらく時間がかかりましたが、他の人にも役立つことを願っています！

10
SeanWM

親コンテキストをパーシャルに渡す最も簡単な方法は、パーシャル内でループを実行することです。これにより、デフォルトで親コンテキストが渡され、パーシャル内でループを実行すると、{{../variable}}規約は親コンテキストにアクセスできます。

ここにフィドルの例 。

データ

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

テンプレート

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

The Partial

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

提案されたソリューションのいくつかは、githubへのリンクからのコメントで使用できます。

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

パーシャルに情報を渡すヘルパーを作成します。

3
Ricardo Souza

キーparentContextの下のサブコンテキスト内に親キー/値を含む各ヘルパー関数を作成しました。

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

注：アンダースコアは依存関係です。

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;

}）;

次のように使用します。

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

{{parentContext.value}}を使用してパーシャルの親コンテキスト値にアクセスします

2
AndrewHenderson

このような何かのために動的なフォーム属性が必要でした...

    {{#each model.questions}}
      <h3>{{text}}</h3>

          {{#each answers}}
                {{formbuilder ../type id ../id text}}
            {{/each}}

    {{/each}}

そして、そのようなヘルパー...

    Handlebars.registerHelper('formbuilder', function(type, id, qnum, text, options)
    {
        var q_type = options.contexts[0][type],
            a_id = options.contexts[1].id,
            q_number = options.contexts[0][qnum],
            a_text = options.contexts[1].text;


            return new Handlebars.SafeString(
                    '<input type=' + q_type + ' id=' + a_id + ' name=' + q_number + '>' + a_text + '</input><br/>'
            );
    });

生産する...

<input type="checkbox" id="1" name="surveyQ0">First question</input>

私のモデルは、配列とオブジェクトが混在した大きな塊です。注目すべきは、「../」を「../type」のように使用すると、親モデルをコンテキストとして渡し、「id」などを使用しない場合は、現在のモデルをコンテキストとして渡すということです。

0
nullsteph