視圖不聽模型事件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);
}