Javascript 每个块辅助对象的_Javascript_Javascript Framework_Handlebars.js

Javascript 每个块辅助对象的

javascript

Javascript 每个块辅助对象的,javascript,javascript-framework,handlebars.js,Javascript,Javascript Framework,Handlebars.js,我在使用带有Handlerbars.js的each block助手时遇到问题 <html> <head> <script> </script> <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> {{#each people}}

我在使用带有Handlerbars.js的each block助手时遇到问题

<html>
<head>
    <script>
    </script>

    <script id="entry-template" type="text/x-handlebars-template">
        <div class="entry">
            {{#each people}}
                <p>{{firstName}} &nbsp;{{lastName}}</p>
            {{/each}}
        </div>
    </script>


    <script src="lib/jquery-1.8.2.min.js"></script>
    <script src="lib/handlebars.js"></script>

    <script type='text/javascript'>
        $(document).ready(function(){
          var people = [
            {firstName: "Yehuda", lastName: "Katz"},
            {firstName: "Carl", lastName: "Lerche"},
            {firstName: "Alan", lastName: "Johnson"}
          ] 

          var source   = $("#entry-template").html();
            var template = Handlebars.compile(source);
            var html = template(people);
            $('#content').html(html);
        });
    </script>
</head>
<body>
    <div id="content">
    </div>

</body>
</html>


{{{每个人}
{{firstName}}{{lastName}}
{{/每个}}
$（文档）.ready（函数（）{
var people=[
{姓：“耶胡达”，姓“卡兹”}，
{姓：“卡尔”，姓：“勒什”}，
{姓：“艾伦”，姓：“约翰逊”}
] 
var source=$（“#条目模板”）.html（）；
var template=handlebar.compile（源代码）；
var html=模板（人）；
$（'#content'）.html（html）；
});

如果我将模板更改为以下代码，一切都会顺利进行：

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        {{#.}}
            <p>{{firstName}} &nbsp;{{lastName}}</p>
        {{/.}}
    </div>
</script>


{{#.}}
{{firstName}}{{lastName}}
{{/.}}

如何使用每个辅助程序块？

您可以将

或

此

与

{{each}}

一起使用：

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        {{#each .}}
            <p>{{firstName}} &nbsp;{{lastName}}</p>
        {{/each}}
    </div>
</script>

演示：

你也可以使用

{{{#each this}}

这可能更容易阅读：@Ben:好的，为了完整性，我添加了这个选项。

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        {{#each this}}
            <p>{{firstName}} &nbsp;{{lastName}}</p>
        {{/each}}
    </div>
</script>

var html = template({ people: people });