Question

以下是一些代码：

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”）; team = 1; this.model.set（“团队”，团队）;

调用渲染函数。

这是否意味着backbone.js不支持在模型中侦听复杂对象的更改？如果是这样，那么正确的方法是什么？

Answer 1

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事件将被触发。

backbone.js：连接模型来查看问题

1 个答案: