1

我是backscore.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;
});

在我运行渲染后一切正常，但是在我开始编辑表单中的数据（例如更改复选框的状态）后，视图中的模型没有改变。如何以正确的方式改变它。

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

非常感谢任何提前！

4

2 回答 2

3

最佳实践称为双向绑定。双向绑定有两个很棒的 Backbone 扩展：

我用的是stickit，它真的很容易处理。

于 2013-12-11T13:13:23.240 回答
2

我对 Juliano 的回答投了赞成票。两种方式绑定有很多，我也使用stickit。话虽如此，它并不总是比在模型更改时手动重新渲染部分模板更容易。

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

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

于 2013-12-12T12:13:16.067 回答