视图不听模型事件Backbone.js

Question

由于某种原因，我无法理解，我的视图未监听事件。 模型正在改变，但是视图似乎并没有意识到这些改变。 这是我的代码。

var playerSet = 1;
var bone = function(){
    var app = {};
    app.BoardModel = Backbone.Model.extend({
        defaults: function(){
            return{
                board:[0,0,0,0,0,0,0,0,0],
                allDisabled: false,
                p1Score: 0,
                p2Score: 0
            }
        },
        setSlot: function(slot, ct){
            var b = this.get("board");
            b[slot] = ct;
            this.set("board", b);
            console.log("CHANGED");
        }
    });
    app.Board = new app.BoardModel;
    app.BoardView = Backbone.View.extend({
        el: $("#ttt-board"),
        initialize: function(){
            this.listenTo(app.Board, "change", this.renderBoard);
        },
        renderBoard: function(){
            console.log("HELLO THERE");
        }
    });
    var tictac = new app.BoardView;
    app.Board.setSlot(0,1);
};
bone();

当我触发setSlot ，随着控制台输出CHANGED ，模型确实发生了变化，但是我从未看到renderBoard函数被调用。

这可能非常简单，但这使我难以理解。

Answer 1

您的问题在于，您仅更改数组对象的内部组件，而不更改模型上的属性。 即使您在模型上手动调用set ，这也不是实际的更改，并且set逻辑仅在新值与旧值之间的相等性检查失败时触发更改事件（在您的情况下不会）。

由于无论如何都在调用自定义函数，为什么不只使用自定义事件呢？

setSlot: function(slot, ct){
  this.get("board")[slot] = ct;
  this.trigger("custom:change:board", slot, ct);
}

现在监听自定义事件（或两者都监听），而不是仅仅change 。

initialize: function(){
  this.listenTo(app.Board, "change custom:change:board", this.renderBoard);
}