Question

我创建了以下Handlebar模板

<script type="text/template" id="status">
{{#completed status}}
     <button class="btn btn-inverse">Close</button>
     <button class="btn btn-primary">Submit</button>
     <button class="btn btn-danger">Delete</button>
{{else}}
     <button class="btn btn-primary">Close</button>
{{/completed}}
</script>

这是我的车把注册助手

Handlebars.registerHelper('completed',function(item,options){
if (item == 'INITIATED'){
    console.log(options.fn())
    return options.fn();        
}
else{
    console.log(options.inverse());
    return options.inverse();
} 
});

我的javascript

obj={status: 'INITIATED'} and obj={status:'RECEIVED'}
Handlebars.compile( $('#status').html() )(obj).appendTo('body')

模板中的status变量可以包含值INITIATED或RECEIVED/COMPLETED

当我在控制台中打印时，我得到了例外按钮（一次，3个按钮，下次是一个按钮）但是在html文件中我只得到了else section（两次）

我不确定我哪里出错了。请指教。

Answer 1

你的模板和帮手很好。你使用它们的方式：

Handlebars.compile( $('#status').html() )(obj).appendTo('body')

虽然没有意义。 Handlebars.compile返回一个函数，调用该函数产生一个字符串;这意味着您的appendTo实际上是这样的：

var tmpl = Handlebars.compile($('#status').html());  // Okay
var html = tmpl(obj);                                // Okay
html.appendTo('body');                               // Broken.

字符串没有appendTo方法。您可以在字符串周围包裹$()：

$(
    Handlebars.compile($('#status').html())(obj)
).appendTo('body');

或者一步一步地使代码更清晰：

var tmpl = Handlebars.compile($('#status').html());
$('body').append(tmpl(obj));

演示：http://jsfiddle.net/ambiguous/46sfd/

手柄模板中的自定义条件

1 个答案: