1

私の Handlebars テンプレートで、同じデータを 2 回ループしようとしていますが、2 回目のループで失敗します。これが私のテンプレートの外観です。

<div id="placeholder"></div>
<script type="text/x-handlebars" id="people-template">
  First loop:<br />
  <ul>
    {{#.}}
        <li>{{name}}</li>
    {{/.}}
  </ul>
  Second loop:<br />
  <ul>
    {{#.}}
        <li>{{name}}</li>
    {{/.}}
  </ul>
</script>

これが JavaScript です。

var context= [
  { name: "John Doe", location: { city: "Chicago" } },
  { name: "Jane Doe", location: { city: "New York"}  }
];

var template = Handlebars.compile($("#people-template").text());
var html = template(context);
$('#placeholder').html(html);

ただし、2 番目のループでは何もレンダリングされません。

First loop:
John Doe
Jane Doe
Second loop:

ここで jsFiddle を作成しました: http://jsfiddle.net/G83Pk/で、これをバグhttps://github.com/wycats/handlebars.js/issues/408として記録しました。誰かがこれを修正する方法を知っているか、問題が何であるかを知っていますか?

4

3 に答える 3

1

私の知る限り、配列を反復処理する正しい方法は、eachブロック ヘルパーを使用することです

テンプレートは次のように記述されます

<script type="text/x-handlebars" id="people-template">
  First loop:<br />
  <ul>
    {{#each .}}
        <li>{{name}}</li>
    {{/each}}
  </ul>
  Second loop:<br />
  <ul>
    {{#each .}}
        <li>{{name}}</li>
    {{/each}}
  </ul>
</script>

更新された Fiddle http://jsfiddle.net/nikoshr/G83Pk/1/

于 2013-01-11T16:56:25.963 に答える
0 
<div id="placeholder"></div>    

<script id="people-template" type="text/x-handlebars">
  First loop:<br />
  <ul>
    {{#each context}}
        <li>{{name}}</li>
    {{/each}}
  </ul>
  Second loop:<br />
  <ul>
    {{#each context}}
        <li>{{name}}</li>
    {{/each}}
  </ul>
</script>

<script type="text/javascript">
var template = Handlebars.compile($("#people-template").html());

var json = {
    "context": [
        { "name": "John Doe", "location": { "city": "Chicago" } },
        { "name": "Jane Doe", "location": { "city": "New York"} }
    ]
};

var html = template(json);
$('#placeholder').html(html);
</script>

each ブロック ヘルパーを使用するには、イテレータを修正する必要があります。また、コンテキスト変数は各イテレータの無効な入力です。上記のコードは、あなたが望むことを行うための適切な方法です。

于 2013-01-11T21:52:50.090 に答える
0

コメントではわかりませんが、コードに同様のシナリオがあるときに、非常に奇妙な動作に遭遇しました。

{{#with xxxxx}}
                               {{#each models}}
                                {{#with attributes}}
                                {{value}}                   ---- Worked here
                                {{/with}}
                                {{/each}}

                                {{#each models}}
                                {{#with attributes}}
                                {{value}}                   ---- Didn't Worked here
                                {{/with}}
                                {{/each}}

{{/with}}

最初のループでは機能しましたが、2 番目のループでは機能しませんでした。最後にすべてのシナリオを奇妙な解決策で行いました。2 番目のループの {{#each models}} の最後に Html スクリプトまたはコメントを追加すると、2 番目のループでコンテキストが回復され、値が適切に表示されます。

したがって、これは問題なく機能しました。

{{#with xxxxx}}
                               {{#each models}}
                                {{#with attributes}}
                                {{value}}                   ---- Worked here
                                {{/with}}
                                {{/each}}

                                {{#each models}}   {{! Comment added }}
                                {{#with attributes}}
                                {{value}}                   ---- It works now.
                                {{/with}}
                                {{/each}}

{{/with}}
于 2013-04-22T17:21:23.610 に答える