blocks|key|2748929|text|我的意思是在template()调用中..|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2748930|您只需要将结果作为对象传递即可。因此，与其调用|2748931|var+html+=+template(data);|code-block|syntax|javascript|2748932|做|2748933|var+html+=+template({apidata:+data});|2748934|并在您的模板代码中使用{{#each+apidata}}|2748935|在http://jsfiddle.net/KPCh4/4/上演示|2748936|(删除了一些崩溃的遗留if代码)|2748937|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/KPCh4/4/^0|6|A|0|0|0|0|0|B|H|0|1|S|0|0|B|2|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|U|3|V|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

<p>I meant in the <code>template()</code> call..</p>

<p>You just need to pass the results as an object. So instead of calling </p>

<pre class="lang-js prettyprint-override"><code>var html = template(data);
</code></pre>

<p>do</p>

<pre class="lang-js prettyprint-override"><code>var html = template({apidata: data});
</code></pre>

<p>and use <code>{{#each apidata}}</code> in your template code</p>

<p>demo at <a href="http://jsfiddle.net/KPCh4/4/" rel="nofollow noreferrer">http://jsfiddle.net/KPCh4/4/</a><br>
(<em>removed some leftover <code>if</code> code that crashed</em>)</p>


blocks|key|158556|text|您可以将this传递给每个块。查看此处：http://jsfiddle.net/yR7TZ/1/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|158557|{{#each+this}}
++++<div+class="row"></div>
{{/each}}|code-block|syntax|javascript|158558|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/yR7TZ/1/^0|4|4|K|S|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>You can pass <code>this</code> to each block. See here: <a href="http://jsfiddle.net/yR7TZ/1/" rel="noreferrer">http://jsfiddle.net/yR7TZ/1/</a></p>

<pre class="lang-html prettyprint-override"><code>{{#each this}}
    &lt;div class="row"&gt;&lt;/div&gt;
{{/each}}
</code></pre>


blocks|key|2748973|text|这个提琴既有each也有direct+json。http://jsfiddle.net/streethawk707/a9ssja22/。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2748974|下面是迭代数组的两种方法。一种是直接传递json，另一种是在传递给content+holder时命名json数组。|2748975|Eg1:下面的例子是直接调用small_data变量内部的json+key+(data)。|2748976|在html中使用以下代码：|2748977|<div+id="small-content-placeholder"></div>|code-block|syntax|javascript|2748978|以下内容可以放在html的header或body中：|2748979|<script+id="small-template"+type="text/x-handlebars-template">
++++<table>
++++++++<thead>
++++++++++++<th>Username</th>
++++++++++++<th>email</th>
++++++++</thead>
++++++++<tbody>
++++++++++++{{#data}}
++++++++++++++++<tr>
++++++++++++++++++++<td>{{username}}
++++++++++++++++++++</td>
++++++++++++++++++++<td>{{email}}</td>
++++++++++++++++</tr>
++++++++++++{{/data}}
++++++++</tbody>
++++</table>
</script>|2748980|下面的文档已经准备好了：|2748981|var+small_source+++=+$("#small-template").html();
var+small_template+=+Handlebars.compile(small_source);|2748982|下面是json：|2748983|var+small_data+=+{
++++++++++++data:+[
++++++++++++++++{username:+"alan1",+firstName:+"Alan",+lastName:+"Johnson",+email:+"alan1@test.com"+},
++++++++++++++++{username:+"alan2",+firstName:+"Alan",+lastName:+"Johnson",+email:+"alan2@test.com"+}
++++++++++++]
++++++++};|2748984|最后，将json附加到content+holder：|2748985|$("#small-content-placeholder").html(small_template(small_data));|2748986|Eg2:使用each的迭代。|2748987|考虑下面的json。|2748988|var+big_data+=+[
++++++++++++{
++++++++++++++++name:+"users1",
++++++++++++++++details:+[
++++++++++++++++++++{username:+"alan1",+firstName:+"Alan",+lastName:+"Johnson",+email:+"alan@test.com"+},
++++++++++++++++++++{username:+"allison1",+firstName:+"Allison",+lastName:+"House",+email:+"allison@test.com"+},
++++++++++++++++++++{username:+"ryan1",+firstName:+"Ryan",+lastName:+"Carson",+email:+"ryan@test.com"+}
++++++++++++++++++]
++++++++++++},
++++++++++++{
++++++++++++++++name:+"users2",
++++++++++++++++details:+[
++++++++++++++++++++{username:+"alan2",+firstName:+"Alan",+lastName:+"Johnson",+email:+"alan@test.com"+},
++++++++++++++++++++{username:+"allison2",+firstName:+"Allison",+lastName:+"House",+email:+"allison@test.com"+},
++++++++++++++++++++{username:+"ryan2",+firstName:+"Ryan",+lastName:+"Carson",+email:+"ryan@test.com"+}
++++++++++++++++++]
++++++++++++}
++++++];|2748989|在将json传递给content+holder时，只需这样命名：|2748990|$("#big-content-placeholder").html(big_template({big_data:big_data}));|2748991|模板看起来像这样：|2748992|<script+id="big-template"+type="text/x-handlebars-template">
++++<table>
++++++++<thead>
++++++++++++<th>Username</th>
++++++++++++<th>email</th>
++++++++</thead>
++++++++<tbody>
++++++++++++{{#each+big_data}}
++++++++++++++++<tr>
++++++++++++++++++++<td>{{name}}
++++++++++++++++++++++++++++<ul>
++++++++++++++++++++++++++++++++{{#details}}
++++++++++++++++++++++++++++++++++++<li>{{username}}</li>
++++++++++++++++++++++++++++++++++++<li>{{email}}</li>
++++++++++++++++++++++++++++++++{{/details}}
++++++++++++++++++++++++++++</ul>
++++++++++++++++++++</td>
++++++++++++++++++++<td>{{email}}</td>
++++++++++++++++</tr>
++++++++++++{{/each}}
++++++++</tbody>
++++</table>
</script>|2748993|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/streethawk707/a9ssja22/^0|6|4|O|17|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|F|3|G|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|20|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|21|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|22|8|@]|D|@]|E|$]]|$1|S|3|T|5|N|7|23|8|@]|D|@]|E|$O|P]]|$1|U|3|V|5|6|7|24|8|@]|D|@]|E|$]]|$1|W|3|X|5|N|7|25|8|@]|D|@]|E|$O|P]]|$1|Y|3|Z|5|6|7|26|8|@]|D|@]|E|$]]|$1|10|3|11|5|N|7|27|8|@]|D|@]|E|$O|P]]|$1|12|3|13|5|6|7|28|8|@]|D|@]|E|$]]|$1|14|3|15|5|N|7|29|8|@]|D|@]|E|$O|P]]|$1|16|3|17|5|6|7|2A|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|2B|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|N|7|2C|8|@]|D|@]|E|$O|P]]|$1|1C|3|1D|5|6|7|2D|8|@]|D|@]|E|$]]|$1|1E|3|1F|5|N|7|2E|8|@]|D|@]|E|$O|P]]|$1|1G|3|1H|5|6|7|2F|8|@]|D|@]|E|$]]|$1|1I|3|1J|5|N|7|2G|8|@]|D|@]|E|$O|P]]|$1|1K|3|-4|5|6|7|2H|8|@]|D|@]|E|$]]]|1L|$1M|$5|1N|1O|1P|E|$1Q|1R]]]]

<p>This fiddle has both <code>each</code> and direct json. <a href="http://jsfiddle.net/streethawk707/a9ssja22/" rel="noreferrer">http://jsfiddle.net/streethawk707/a9ssja22/</a>.</p>

<p>Below are the two ways of iterating over array. One is with direct json passing and another is naming the json array while passing to content holder.</p>

<p>Eg1: The below example is directly calling json key (data) inside small_data variable.</p>

<p>In html use the below code:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="small-content-placeholder"&gt;&lt;/div&gt;
</code></pre>

<p>The below can be placed in header or body of html:</p>

<pre class="lang-html prettyprint-override"><code>&lt;script id="small-template" type="text/x-handlebars-template"&gt;
    &lt;table&gt;
        &lt;thead&gt;
            &lt;th&gt;Username&lt;/th&gt;
            &lt;th&gt;email&lt;/th&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            {{#data}}
                &lt;tr&gt;
                    &lt;td&gt;{{username}}
                    &lt;/td&gt;
                    &lt;td&gt;{{email}}&lt;/td&gt;
                &lt;/tr&gt;
            {{/data}}
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/script&gt;
</code></pre>

<p>The below one is on document ready:</p>

<pre class="lang-js prettyprint-override"><code>var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);
</code></pre>

<p>The below is the json:</p>

<pre class="lang-js prettyprint-override"><code>var small_data = {
            data: [
                {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan1@test.com" },
                {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan2@test.com" }
            ]
        };
</code></pre>

<p>Finally attach the json to content holder:</p>

<pre class="lang-js prettyprint-override"><code>$("#small-content-placeholder").html(small_template(small_data));
</code></pre>

<p>Eg2: Iteration using each.</p>

<p>Consider the below json.</p>

<pre class="lang-js prettyprint-override"><code>var big_data = [
            {
                name: "users1",
                details: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                    {username: "allison1", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                    {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
                  ]
            },
            {
                name: "users2",
                details: [
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                    {username: "allison2", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                    {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
                  ]
            }
      ];
</code></pre>

<p>While passing the json to content holder just name it in this way:</p>

<pre class="lang-js prettyprint-override"><code>$("#big-content-placeholder").html(big_template({big_data:big_data}));
</code></pre>

<p>And the template looks like :</p>

<pre class="lang-html prettyprint-override"><code>&lt;script id="big-template" type="text/x-handlebars-template"&gt;
    &lt;table&gt;
        &lt;thead&gt;
            &lt;th&gt;Username&lt;/th&gt;
            &lt;th&gt;email&lt;/th&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            {{#each big_data}}
                &lt;tr&gt;
                    &lt;td&gt;{{name}}
                            &lt;ul&gt;
                                {{#details}}
                                    &lt;li&gt;{{username}}&lt;/li&gt;
                                    &lt;li&gt;{{email}}&lt;/li&gt;
                                {{/details}}
                            &lt;/ul&gt;
                    &lt;/td&gt;
                    &lt;td&gt;{{email}}&lt;/td&gt;
                &lt;/tr&gt;
            {{/each}}
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/script&gt;
</code></pre>


blocks|key|161037|text|Handlebar可以使用数组作为上下文。您可以使用.作为数据的根。因此，您可以使用{{#each+.}}遍历数组数据。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|161038|​|161039|var+data+=+[
++{
++++Category:+"General",
++++DocumentList:+[
++++++{
++++++++DocumentName:+"Document+Name+1+-+General",
++++++++DocumentLocation:+"Document+Location+1+-+General"
++++++},
++++++{
++++++++DocumentName:+"Document+Name+2+-+General",
++++++++DocumentLocation:+"Document+Location+2+-+General"
++++++}
++++]
++},
++{
++++Category:+"Unit+Documents",
++++DocumentList:+[
++++++{
++++++++DocumentName:+"Document+Name+1+-+Unit+Documents",
++++++++DocumentList:+"Document+Location+1+-+Unit+Documents"
++++++}
++++]
++},
++{
++++Category:+"Minutes"
++}
];

$(function()+{
++var+source+=+$("#document-template").html();
++var+template+=+Handlebars.compile(source);
++var+html+=+template(data);
++$('#DocumentResults').html(html);
});|code-block|syntax|javascript|161040|.row+{
++border:+1px+solid+red;
}|161041|<script+src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div+id="DocumentResults">pos</div>
<script+id="document-template"+type="text/x-handlebars-template">
++<div>
++{{#each+.}}
++++<div+class="row">
++++++<div+class="col-md-12">
++++++++<h2>{{Category}}</h2>
++++++++{{#DocumentList}}
++++++++<p>{{DocumentName}}+at+{{DocumentLocation}}</p>
++++++++{{/DocumentList}}
++++++</div>
++++</div>
++{{/each}}
++</div>
</script>|161042|161043|entityMap^0|Q|1|16|B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>Handlebars can use an array as the context. You can use <code>.</code> as the root of the data. So you can loop through your array data with <code>{{#each .}}</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [
  {
    Category: "General",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - General",
        DocumentLocation: "Document Location 1 - General"
      },
      {
        DocumentName: "Document Name 2 - General",
        DocumentLocation: "Document Location 2 - General"
      }
    ]
  },
  {
    Category: "Unit Documents",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - Unit Documents",
        DocumentList: "Document Location 1 - Unit Documents"
      }
    ]
  },
  {
    Category: "Minutes"
  }
];

$(function() {
  var source = $("#document-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('#DocumentResults').html(html);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
  border: 1px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="DocumentResults"&gt;pos&lt;/div&gt;
&lt;script id="document-template" type="text/x-handlebars-template"&gt;
  &lt;div&gt;
  {{#each .}}
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;h2&gt;{{Category}}&lt;/h2&gt;
        {{#DocumentList}}
        &lt;p&gt;{{DocumentName}} at {{DocumentLocation}}&lt;/p&gt;
        {{/DocumentList}}
      &lt;/div&gt;
    &lt;/div&gt;
  {{/each}}
  &lt;/div&gt;
&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|158577|text|使用this和{{this}}。请参阅node.js中的以下代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|158578|var+Handlebars=+require("handlebars");
var+randomList=+["James+Bond",+"Dr.+No",+"Octopussy",+"Goldeneye"];
var+source=+"<ul>{{#each+this}}<li>{{this}}</li>{{/each}}</ul>";
var+template=+Handlebars.compile(source);
console.log(template(randomList));|code-block|syntax|javascript|158579|控制台日志输出：|158580|<ul><li>James+Bond</li><li>Dr.+No</li><li>Octopussy</li><li>Goldeneye</li></ul>|158581|entityMap^0|2|4|7|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>Using <code>this</code> and <code>{{this}}</code>. See code below in node.js:</p>

<pre class="lang-js prettyprint-override"><code>var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "&lt;ul&gt;{{#each this}}&lt;li&gt;{{this}}&lt;/li&gt;{{/each}}&lt;/ul&gt;";
var template= Handlebars.compile(source);
console.log(template(randomList));
</code></pre>

<p>Console log output:</p>

<pre class="lang-html prettyprint-override"><code>&lt;ul&gt;&lt;li&gt;James Bond&lt;/li&gt;&lt;li&gt;Dr. No&lt;/li&gt;&lt;li&gt;Octopussy&lt;/li&gt;&lt;li&gt;Goldeneye&lt;/li&gt;&lt;/ul&gt;
</code></pre>


blocks|key|2749030|text|我遇到了一个类似的问题，我在this中获取了整个对象，但在执行#each时显示了该值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2749031|解决方案:重新构造对象数组，如下所示：|2749032|let+list+=+results.map((item)=>{
++++return+{+name:item.name,+author:item.author+}
});|code-block|syntax|javascript|2749033|然后在模板文件中：|2749034|{{#each+list}}
++++<tr>
++++++++<td>{{name+}}</td>
++++++++<td>{{author}}</td>++++++
++++</tr>
{{/each}}+|2749035|entityMap^0|E|4|V|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>I had a similar issue I was getting the entire object in <code>this</code> but the value was displaying while doing <code>#each</code>.</p>
<p>Solution:
I re-structure my array of object like this:</p>
<pre><code>let list = results.map((item)=&gt;{
    return { name:item.name, author:item.author }
});
</code></pre>
<p>and then in template file:</p>
<pre><code>{{#each list}}
    &lt;tr&gt;
        &lt;td&gt;{{name }}&lt;/td&gt;
        &lt;td&gt;{{author}}&lt;/td&gt;      
    &lt;/tr&gt;
{{/each}} 
</code></pre>


<p>This might seem a silly question but I can't seem to find the answer anywhere.</p>

<p>I'm hitting this Web API that returns an array of objects in JSON format:</p>

<p><img src="https://i.stack.imgur.com/HUJSA.png" alt="array of objects"></p>

<p>Handlebars docs shows the following example:</p>

<pre><code>&lt;ul class="people_list"&gt;
  {{#each people}}
  &lt;li&gt;{{this}}&lt;/li&gt;
  {{/each}}
&lt;/ul&gt;
</code></pre>

<p>In the context of:</p>

<pre><code>{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}
</code></pre>

<p>In my case I don't have a name for the array, it's just the root object of the response. I've tried using <code>{{#each}}</code> with no luck.</p>

<p>First time using Handlebars... What am I missing?</p>

<p><strong>UPDATE</strong></p>

<p>Here's a simplified fiddle to show you what I'm asking: <a href="http://jsfiddle.net/KPCh4/2/" rel="noreferrer">http://jsfiddle.net/KPCh4/2/</a></p>

<p>Does handlebars require the context variable to be an object and not an array?</p>


How to iterate over array of objects in Handlebars?

JSON

这似乎是一个愚蠢的问题，但我似乎在任何地方都找不到答案。我遇到了这个Web API，它返回JSON格式的对象数组：​​Handlebar docs如下例所示：<ul class="people_list">  {{#each people}}  <li>{{this}}</li>  {{/each}}</ul>在以下情...

问如何遍历Handlebar中的对象数组？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何遍历Handlebar中的对象数组？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何遍历Handlebar中的对象数组？
EN