Question

我正在尝试使用把手来解析javascript对象，但由于某种原因，Handlebars没有正确加载数据...

这是我的模板文件：

{{> header}}
<h1>Handlebars JS Example</h1>
<script id="some-template" type="text/x-handlebars-template"> 
<table>
    <thead> 
        <th>Name</th> 
        <th>Job Title</th> 
        <th>Twitter</th> 
    </thead> 
    <tbody> 
        {{#users}} 
        <tr> 
            <td>{{fullName person}}</td> 
            <td>{{jobTitle}}</td> 
            <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td> 
        </tr> 
        {{/users}} 
    </tbody> 
</table> 
</script>
    <body>
    <!-- Insertion point for handlebars template -->
        <div id="main" style="margin-left:100px">
        </div>
    </body> 
<script type="text/javascript" src="javascript/templating.js"></script>

这是我的.js文件：

$(document).ready(function() {

    var source = $("#some-template").html(); 
    var template = Handlebars.compile(source); 

    var data = { 
        users: [ { 
            person: {
                firstName: "Garry", 
                lastName: "Finch"
            },
            jobTitle: "Front End Technical Lead",
            twitter: "gazraa" 
        }, {
            person: {
                firstName: "Garrasd", 
                lastName: "Finch"
            }, 
            jobTitle: "Photographer",
            twitter: "photobasics"
        }, {
            person: {
                firstName: "Garry", 
                lastName: "Finch"
            }, 
            jobTitle: "LEGO Geek",
            twitter: "minifigures"
        } ]
    }; 

    Handlebars.registerHelper('fullName', function(person) {
      return person.firstName + " " + person.lastName;
    });

    console.log(template(data));

    $("#main").append(template(data));

});

注意 - 当我在console.log（模板（数据））时，我得到以下内容：

<table>
<thead> 
    <th>Name</th> 
    <th>Job Title</th> 
    <th>Twitter</th> 
</thead> 
<tbody> 
</tbody>

任何人都知道我做错了什么？我正在使用node.js + express。

谢谢！

Answer 1

您没有为users定义任何块助手，而是尝试在模板中使用它。

更改这些行

...
{{#users}} 
...
{{/users}}
...

到这些：

...
{{#each users}}
...
{{/each}}
...

点击此处的文档：http://handlebarsjs.com/builtin_helpers.html#iteration

每个块助手

您可以使用内置的每个帮助程序遍历列表。在 - 的里面   阻止，您可以使用它来引用正在迭代的元素。

把手没有解析数据

1 个答案: