我是backbone.js + underscore.js的初学者。对不起,如果这里已经有答案了。也许我只是没有正确的问题。
我有简单的模板:
<script type="text/template" id="item-template">
<div>
<input id="todo_complete" type="checkbox" <%= Completed ? 'checked="checked"' : '' %> />
<%= Title %>
</div>
</script>
接下来的观点:
define(["backbone", "underscore", "jquery"],function (Backbone, _, $) {
var todoView = Backbone.View.extend({
tagName: 'li',
todoTpl: _.template($('#item-template').html()),
events: {
'change input': 'edit',
},
initialize: function() {
this.$el = $('#todo');
},
render: function() {
this.$el.append(this.todoTpl(this.model.toJSON()));
this.input = this.$('.edit');
return this;
},
edit: function(val) {
//console.log(this);
//console.log(_(this.el));
},
});
return todoView;
});
和模型:
define(["backbone", "underscore", "jquery"], function (Backbone, _, $) {
var Todo = Backbone.Model.extend({
defaults: {
Title: '',
Completed: false
}
});
return Todo;
});
运行渲染后,所有工作都很好,但在我开始编辑表单中的数据后(例如更改复选框的状态),View中的模型不会被更改。如何以正确的方式改变它。
我知道我可以在视图中的每个输入更改上添加事件,并通过手更改整个模型的每个属性的值。在这种情况下,最佳做法是什么?
非常感谢任何进步!
答案 0 :(得分:3)
最佳做法称为Two-Way Binding。有两个很棒的Backbone扩展用于双向绑定:
我和stickit一起使用,很容易处理它。
答案 1 :(得分:2)
我对Juliano的回答进行了投票。在双向绑定方面有很多,我也使用了stickit。虽然说它并不总是比模型更改时手动重新渲染部分模板更容易。
仔细考虑一下,您希望如何更新模型?您是否希望每次更改都立即投入到您的模型中 - 或者您只是想在更改提交后更新模板。
Derek Bailey写了一篇关于他解决这个问题的好文章: http://lostechies.com/derickbailey/2011/07/24/awesome-model-binding-for-backbone-js/