在数据更改时重新渲染Handlebars模板

我有一个模板，显示基于JSON对象中某些布尔值的按钮。有两个不同的按钮可以显示。在数据更改时重新渲染Handlebars模板

编译模板代码：

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>

的问题是当someJsonObject中的布尔值发生更改时，视图不会更新。我认为这会自动发生（就像流星中的Handlebars一样），但似乎我错了？

在这种情况下：它是如何完成的？我可以有一个重新渲染模板的方法，可以在setter中调用该值。问题是，似乎$('#some-div-container').html(template(someJsonObject));行的方法没有办法。

我很明显在这里丢失了一些东西。提前感谢！

来源

2015-06-22 Esso

把手不处理数据绑定以更新值更改。您可以使用像ember这样的框架，它带有双向数据绑定。

香草的方式对数据变化进行重新渲染使用Object.observe：

Object.observe(someJsonObject, function() { template(someJsonObject); });

来源

2015-06-22 08:50:12

啊，这是我的流星，能够干扰我，然后体验。谢谢！ 'Object.observe（someJsonObject，function（）{（'＃some-container'）。html（template（someJsonObject））; }）;'做了我想要的。 – Esso

@Esso请记住，所有浏览器都不支持Object.observe（http://caniuse.com/#feat=object-observe）。您可能想为不受支持的浏览器使用[polyfill]（https://github.com/jdarling/Object.observe）。 –

从[MDN]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe）此功能已过时。虽然它可能在某些浏览器中仍然有效，但它的使用是不鼓励的，因为它可以在任何时候被删除。尽量避免使用它 –

在数据更改时重新渲染Handlebars模板

回答

相关问题