Backbone collection not triggering add event on fetch

Question

I have been banging my head against a wall for hours on this one.... Looked at many-a-page and I feel like I have my script correct, but my collection is not triggering an add event with add: true passed in the fetch method. I can bind to the reset event, but the add event doesn't trigger..

Model:

test.Models.AppBlock = Backbone.Model.extend({
    defaults: {
        AppID:          null,
        AppName:        null,
        AppDescription: null
    },
    idAttribute: "AppID"
});

Collection:

test.Collections.AppBlock = Backbone.Collection.extend({
    model:       test.Models.AppBlock,
    url:         ApiPath + "apps/byuser",

    Loading: false,

    initialize: function () {

    },

    getAppBlocks: function () {
        if (!this.Loading) {
            this.Loading = true;
            this.fetch({
                data: JSON.stringify({
                          Token: test.Session.Token
                      }),
                add:         true,  // OMG WTF ?!?!
                type:        'POST',
                dataType:    'json',
                contentType: 'application/json',
                cache:       false,
                success:     this.getAppBlocksSuccess,
                error:       this.getAppBlocksError
            });
        }
    },

    parse: function (response) {
        return response.Data;
    },

    getAppBlocksSuccess: function (that, response) {

    },

    getAppBlocksError: function (that, response) {

    }
});

View:

test.Views.DashboardLatestMain = Backbone.View.extend({
    Loading: null,

    initialize: function () {
        this.template = _.template(test.Templates.DashboardLatestMain);
        this.collection.bind('add', this.addAppBlock);
        this.render();
    },

    render: function () {
        $('#latest').prepend(this.template);
        this.Loading = new test.Views.Loading({
            el: '.main'
        });
        this.collection.getAppBlocks();
    },

    addAppBlock: function (appBlockModel) {
        alert(appBlockModel); // no dice....
        var appBlockView = new test.Views.AppBlock({
            model: appBlockModel,
            el: '#latest .main h3',
            After: true
        });
    }
});

Any help is greatly appreciated.

edit

Data returned from api:

{
    "Status":["1","OK"],
    "Data":[{"AppID":1,"AppName":"test","AppDescription":"test"},
            {"AppID":2,"AppName":"test","AppDescription":"test"}]
}

Could we have a little bit more information regarding what is returned by you call? Models are added in the collection, but no 'add' event is triggered? — Loamhoof
Are you using BB 1.0? If not, you need to use update:true since before 1.0 the default was to reset instead of update, which triggers only a 'reset' event and no 'add' events. — Paul Hoenecke
@MikaelHärsjö I don't see your point. He's fetching data from the server, why would he use set? — Loamhoof
Ah yes, I will add data as well.. I do get data back successfully and the collection contains the two models. I think I am using backbone ~.9, but I will try the update: true solution. — Kenny Thompson
@KennyThompson this.collection.bind('add', this.addAppBlock); is that a typo? Your view doesn't belong to any collection, its model does (this.model.collection...). — Loamhoof

Paul Hoenecke Paul Hoenecke · Accepted Answer · 2013-04-03T14:07:31

In Backbone 0.9.9 collection's fetch did a reset by default, which triggered only the 'reset' event. In 1.0, fetch does an update (now called set), and triggers 'add', 'remove' and 'change' events by default.

So, either update to 1.0 and your existing code should work. Or, add update:true to your fetch call (you don't need add:true then because that is the default).

Backbone collection not triggering add event on fetch

1 Answers