web-dev-qa-db-ja.com

jsonオブジェクトのhandlebars配列

jsonオブジェクトの配列をハンドルバーでテンプレート化する必要があります：（by chrome console）[object、object、object、object]ここで、すべてのオブジェクトはこのproperty：name、surname、eccで構成されます。

オブジェクトの配列をハンドルバーに配置することは不可能であると理解しましたが、配列のすべてのオブジェクトのすべてのプロパティを持つ一意のオブジェクトを作成する必要があります。誰でもそれを作成する機能を提案できますか

jsonhandlebars.js
27
Stefano Maglione

テンプレートを呼び出すときに、配列をラッパーオブジェクトのプロパティとして設定できます。

たとえば、objectsを保持プロパティとして

var an_array = [
    {name: "My name"},
    {name: "Another name"}
];

var source   = /* a template source*/;
var template = Handlebars.compile(source);
var wrapper  = {objects: an_array};

console.log(template(wrapper));

テンプレートはこのプロパティを次のように使用できます。

<ul>
    {{#each objects}}
        <li>{{name}}</li>
    {{/each}}
</ul>

そしてデモ http://jsfiddle.net/YuvNY/1/

var an_array=[
    {name:"My name"},
    {name:"Another name"},    
];

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template({objects:an_array}) );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

<script type='text/template' id='src'>
<ul>
  {{#each objects}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>

または、配列をテンプレートに直接渡し、コンテキストを.（ドット）に設定してeachヘルパーを呼び出すことができます

var template = Handlebars.compile(source);
console.log(template(an_array));

<ul>
    {{#each .}}
        <li>{{name}}</li>
    {{/each}}
</ul>

http://jsfiddle.net/nikoshr/YuvNY/32/

var an_array=[
    {name:"My name"},
    {name:"Another name"},    
];

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template(an_array) );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

<script type='text/template' id='src'>
<ul>
  {{#each .}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>
90
nikoshr