车把模板答案

【问题标题】：Handlebar templates车把模板
【发布时间】：2012-08-26 02:33:18
【问题描述】：

我有一个包含数据的数组，当我尝试使用车把模板编译它时，在获取“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);

【问题讨论】：

testData 真正的样子是什么？是数组还是对象数组？
testData 是一个对象数组。

标签： javascript handlebars.js

【解决方案1】：

我无法重现您的错误，但看起来 Handlebars 助手调用不正确。最有可能的候选人是你的{{#each}}，因为each 应该被调用并带有一些迭代的东西。我们可以通过使用一个对象调用模板函数来解决这个问题，这样您的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/

【讨论】：