Question

我是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中的模型不会被更改。如何以正确的方式改变它。

我知道我可以在视图中的每个输入更改上添加事件，并通过手更改整个模型的每个属性的值。在这种情况下，最佳做法是什么？

非常感谢任何进步！

Answer 1

最佳做法称为Two-Way Binding。有两个很棒的Backbone扩展用于双向绑定：

Backbone Stickit（推荐）：http://nytimes.github.io/backbone.stickit/
Backbone ModelBinder：https://github.com/theironcook/Backbone.ModelBinder

我和stickit一起使用，很容易处理它。

Answer 2

我对Juliano的回答进行了投票。在双向绑定方面有很多，我也使用了stickit。虽然说它并不总是比模型更改时手动重新渲染部分模板更容易。

仔细考虑一下，您希望如何更新模型？您是否希望每次更改都立即投入到您的模型中 - 或者您只是想在更改提交后更新模板。

Derek Bailey写了一篇关于他解决这个问题的好文章： http://lostechies.com/derickbailey/2011/07/24/awesome-model-binding-for-backbone-js/

BackboneJS + UnderscoreJS如何将el绑定回模型

2 个答案: