车把模板

时间:2012-08-24 11:39:31

标签: javascript handlebars.js

我有数据的数组,当我尝试用handlebar模板编译它时,我得到的错误是“var fn = options.fn,inverse = options.inverse; - option is undefined”,同时获取值“柱”。 有人能让我知道这里错过了什么吗?

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);

1 个答案:

答案 0 :(得分: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/