Javascript将模板绑定到数据

Question

我真的很喜欢handlebars.js模板，但我想挂钩数据绑定以在数据更改时更新模板。我已经知道如何做这样的事情：

var users = ['hello','world','third'];
var source = '<form>{{#each users}}<input type="text" value="{{this}}">{{/each}}</form>';
var template = Handlebars.compile(source);
$('.form-cont').html(template({users: users}));

如果我想稍后再添加其他用户

users.push('last');

现在更新模板我更新了HTML

$('.form-cont').html(template({users: users}));

我希望只更新已更改的内容，在上面的代码中，原始html被删除并替换为新模板。有没有办法只更新改变的内容？含义在每个项目中添加一个项目而不擦除原始输入。

我知道Knockout.js，Angular.js和Ember.js已将其内置到他们的框架中。我正在寻找一个更轻量级的解决方案，只处理模板绑定，而不是整个框架。那里有什么东西吗？

Answer 1

Handlebars没有内置数据绑定功能。 Ember.js和Sproutcore使用带有数据绑定扩展的Handlebars模板。还有像juggy / backrub或backbone.modelbinding这样的库，用于与Backbone.js集成。另请参阅mikeric / rivets以获取一般数据绑定支持。轻量级选项可能是使用具有pub-sub功能的事件数组实现，例如AZER /新列表。