1

この質問は比較的簡単です。レンダリングしたいキーと値のペアのフラット オブジェクトのコレクションがあります。私の例では、次のように定義された状態のコレクションを受け取ります。

var an_array=[
{AK:"Alaska"},
{WA:"Washington"},    
];

そして、Handlebars テンプレートを次のようにコンパイルします。

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template(an_array) );

テンプレートは配列をレンダリングしていません:

<script type='text/template' id='src'>
<ul>
{{#each .}}
<li>{{@key}}</li>
{{/each}}
</ul>    
</script>

www.handlebars.js から:

オブジェクトの反復には、代わりに {{@key}} を使用します。

それだけです。ここに jsfiddle を書きました: http://jsfiddle.net/eggmatters/yMasE/

サーバーからいくつかの大きな配列が返されており、それらのオブジェクトを再フォーマットするのではなく、そのままレンダリングしたいと考えています。

4

1 に答える 1

3

したがって、この特定の状況では、おそらく最もスムーズな方法は、カスタム イテレータを作成することです。私はあなたのフィドルを更新し、いくつかの重大なエラーを修正し、目的を達成するためのリスト反復ヘルパーを追加しました。

Handlebars.registerHelper('list', function(ctx, opts) {
  var res = ''
  ctx.forEach(function(obj){
    var key = Object.keys(obj);
    var data = {key: key, val: obj[key]}
    res += opts.fn(obj, { data: data });
  });
  return res;
});

var an_array = [{AK:"Alaska"}, {WA:"Washington"}];
var source = $("#src").html();
var template = Handlebars.compile(source);
$("body").append(template(an_array));

この反復子を使用して、テンプレートを次のように更新すると、正しくレンダリングされます。

<ul>
  {{#list .}}
    <li>{{@key}}: {{@val}}</li>
  {{/list}}
</ul>

実際の例: http://jsfiddle.net/yMasE/2/

カスタム イテレータがハンドルバーで機能する方法は少しわかりにくいですが、詳細についてはhttp://handlebarsjs.com/block_helpers.htmlを参照してください。

お役に立てれば！

于 2013-09-18T19:10:46.647 に答える