Question

I am writing a backbone.js app, and I have a problem.
My collections do not fire events, can anyone spot the problem in the code bellow? I get the render-feedback, the initializer feedback.. but the append method is never called. I know that the “../app” returns a list with tro json items. And I can even see that these are being created in the collection.
Why do my event not get called?

window.TablesInspectorView = Backbone.View.extend({

    tagName: "div",

    initialize: function () {
        console.log('Initializing window.TablesInspectorView');        

        // setup the tables
        this.data     = new Backbone.Collection();
        this.data.url = "../app";
        this.data.fetch();

        // some event binds..
        this.data.on("change", this.render     , this);
        this.data.on("add"   , this.append_item, this);
    },
    render: function(){
        console.log("render");
        _.each(this.data.models, this.append_item);
    },
    append_item: function(item) {
        console.log("appended");
    }
});

Answer 1

According to my knowledge , the backbone fetch() is an asynchronous event and when it completes the reset event is triggered ,

When the models belonging to the collection (this.data) are modified , the change event is triggered, so im guessing you have not got that part correct.

so i would do something like this :

window.TablesInspectorView = Backbone.View.extend({

    tagName: "div",

    initialize: function () {
        console.log('Initializing window.TablesInspectorView');        

        // setup the tables
        this.data     = new Backbone.Collection();
        this.data.url = "../app";
        this.data.fetch();

        // some event binds..
        this.data.on("reset", this.render     , this); //change here
        this.data.on("add"   , this.append_item, this); // i dont see a this.data.add() in you code so assuming this was never called ?
    },
    render: function(){
        console.log("render");
        _.each(this.data.models, this.append_item);
    },
    append_item: function(item) {
        console.log("appended");
    }
});