javascript - 车把模板

Question

我有数据数组，当我尝试使用车把模板编译它时，在获取“列”的值时出现“var fn = options.fn，inverse = options.inverse; - 选项未定义”错误。有人可以让我知道这里错过了什么吗？

testData = [
  title : 'text1',
  values : {column: [0, 0, 0]}
]


<table>
{{#each}}
<tr>    
    <td>{{title }}</td>
    {{#each values}}
        <td>{{column}}</td> 
    {{/each}}   
</tr>
{{/each}}
</table>



var template = Handlebars.compile(tmpl_src);    
var html = template(testData);
$(body).html(html);

Answer 1

我无法重现您的错误，但看起来 Handlebars 助手被错误地调用了。最有可能的候选人是你的{{#each}}aseach应该被调用的东西来迭代。我们可以通过使用一个对象调用模板函数来解决这个问题，以便您testData在模板中拥有一个名称：

var testData = [
    { title : 'text1', values : {column: [0, 0, 0]} },
    //...
];
var template = Handlebars.compile(tmpl_src);    
var html = template({
    rows: testData
});

然后对模板稍作调整：

<table>
    {{#each rows}}
        <tr>    
            <td>{{title}}</td>
            {{#each values.column}}
                <td>{{.}}</td> 
            {{/each}}   
        </tr>
    {{/each}}
</table>

我还调整了内部each，以便它迭代内部数组values而不是尝试迭代values自身，{{.}}引用当前项目，这样应该会给你你所追求的零。

演示：http: //jsfiddle.net/ambiguous/CRCG5/