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);
}

View不会听模型事件Backbone.js

1 个答案: