View doesn't listen to Model Event Backbone.js

Question

For some reason I cannot comprehend, events are not being listened to by my View. The model IS changing, but the view doesn't seem to acknowledge these changes. Here's my code.

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

When I fire setSlot, the model does change as the console outputs CHANGED, however I never see the renderBoard function being called.

This is probably incredibly simple, but it eludes me.

Answer 1

Your problem is that you are only changing the internal components of the array object, not the attribute on your model. Even though you are manually calling set on the model, this is not an actual change and the set logic only triggers a change event if the equality check between the old and new values fails (which in your case it doesn't).

Since you are calling a custom function anyways, why not just use a custom event?

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

Now listen for the custom event (or both) instead of just change.

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