Question

I am getting started with Backbone.js but can’t seem to get the simplest proof-of-concept working. I have the following code:

$(function() {

    var Contact = Backbone.Model.extend({

        url: 'contacts.txt'

    });

    var ContactList = Backbone.Collection.extend({

        model: Contact,
        url: 'contacts.txt'

    });

    var Contacts = new ContactList();

    var ContactView = Backbone.View.extend({

        tagName: 'li',

        template: _.template($('#contact-template').html()),

        initialize: function() {
            _.bindAll(this);
        },

        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }

    });

    var AppView = Backbone.View.extend({

        el: '#contacts',

        initialize: function() {
            Contacts.bind('add', this.addOne, this);
            Contacts.fetch();
        },

        addOne: function(Contact) {
            var view = new ContactView({model: Contact});
            this.$el.append(view.render().el);
        }

    });

    var app = new AppView();

});

The file contacts.txt contains a simple JSON structure, which is loading fine according to Chrome:

[{"from_acct_id": 5, "ct": 0, "from_display_nm": "Name 1", "to_acct_id": 1},
 {"from_acct_id": 3, "ct": 1, "from_display_nm": "Name 2", "to_acct_id": 1},
 {"from_acct_id": 2, "ct": 0, "from_display_nm": "Name 3", "to_acct_id": 1},
 {"from_acct_id": 4, "ct": 1, "from_display_nm": "Name 4", "to_acct_id": 1}]

For whatever reason, the addOne() function bound to the add event in AppView is never invoked. What could be going wrong?

Answer 1

A Backbone collection’s fetch call will fire a reset event. Bind to reset instead.

http://documentcloud.github.com/backbone/#Collection-fetch