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"}]
}

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"}]
}

• javascript
• backbone.js

• 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 Commented Apr 3, 2013 at 13:52
• 1 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 Commented Apr 3, 2013 at 13:52
• @MikaelHärsjö I don't see your point. He's fetching data from the server, why would he use set? – Loamhoof Commented Apr 3, 2013 at 13:55
• 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 Commented Apr 3, 2013 at 13:56
• @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 Commented Apr 3, 2013 at 14:00

1 Answer 1

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).