我有一个模板,它基于JSON对象中的一些布尔值显示一个按钮。它可以显示两种不同的按钮。
编译模板的代码:
source = $('#some-template').html(); // Get the HTML source of the template
template = Handlebars.compile(source); // Compile it
$('#some-div-container').html(template(someJsonObject));
假设对象如下所示:
someJsonObject = {
smeBooleanValue : false,
someOtherValue : 5
};
模板如下所示:
<div id="some-div-container">
<script id="some-template" type="text/x-handlebars-template">
<button type="button" class="btn btn-default btn-lg" onclick="myGreatMethodForDoingThings()">
{{#if smeBooleanValue}} <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> Do something
{{else}} <span class="glyphicon glyphicon-play" aria-hidden="true"></span> Do something else{{/if}}
</button>
</script>
</div>
问题是,当的布尔值发生变化时,视图不会更新。我以为这会自动发生(就像Meteor中的Handlebar一样),但似乎我错了?
在这种情况下:它是如何完成的?我可以有一个重新渲染模板的方法,可以在值的setter中调用该方法。问题是,似乎带有行$('#在
行的方法似乎没有做到这一点。
我显然错过了一些东西。事先非常感谢!
Handlebar不处理数据绑定以更新值更改。您可以使用带有双向数据绑定的框架,例如Emer。
在数据更改时执行重新渲染的普通方法是使用Object.观察:
Object.observe(someJsonObject, function() { template(someJsonObject); });