0

这是一些代码：

var TopPanel = Backbone.View.extend( {
    initialize: function() {
        this.listenTo(this.model, "change", this.render);
    },
    render: {
       ...
    }
});


var MyData = Backbone.Model.extend({
    initialize: function() {
    },
    defaults: {
        team: {
        level:0,
            name: "bla"
        }
    }
});

var myData = new MyData();
var topPanel = new TopPanel({model: myData});
topPanel.render();
var anotherView = new AnotherView( {model: myData} );

在另一个视图中，我正在更改按钮单击时的模型，如下所示：

var team = this.model.get("team");
team.level = 1;
this.model.set("team", team);

当我在另一个视图中按下按钮时，它会按照上面的说明更改模型，但不会调用 topPanel 视图的渲染功能。但是，如果我将上面的代码更改为： var team = this.model.get("team"); 团队 = 1；this.model.set("团队", 团队);

调用渲染函数。

这是否意味着backbone.js 不支持监听Model 中复杂对象的变化？如果是这样，那么正确的方法是什么？

4

1 回答 1

3 
var team = this.model.get("team");
team.level = 1;
this.model.set("team", team);

在这里，您实际上并没有team像您想象的那样更改属性。你只是在改变它。您的模型存储对 JSON 对象的引用。当您更改此 JSON 时，引用不会更改，因此不会change触发任何事件。这也意味着您的最后一行this.model.set("team", team);实际上完全没用，因为您试图再次设置相同的对象（因此相同的引用）。Backbone 会默默地忽略该调用。

现在，关于您可以做些什么来实际触发更改：

解决方案1：
手动触发：

this.model.get('team').level = 1;
this.model.trigger('change');

解决方案 2：
创建一个新对象：

var team = _.clone(this.model.get('team'));
team.level = 1;
this.model.set('team', team);

在这两种解决方案中，您的模型将被更改并且change事件将被触发。

于 2013-06-03T12:57:54.340 回答