Bootstrapping data in backbone.js?

Question

I've manage to put together the below code through various examples, which seems to work okay, but it doesn't seem to preload my data, can anyone please tell me what I'm missing?

App = (function(Backbone, _){
    var Note = Backbone.Model.extend(
    {
        defaults:
        {
            part1: 'hello',
            part2: 'world'
        }
    });

    var TableList = Backbone.Collection.extend({
        model: Note
    });

    var ListRow = Backbone.View.extend(
    {
        tagName: 'li',

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

        render: function()
        {
            $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');

            return this;
        }
    });

    var ListView = Backbone.View.extend(
    {
        el: $('#layout_content'),

        events:
        {
            'click button#add': 'addItem'
        },

        initialize: function()
        {
            _.bindAll(this, 'render', 'addItem', 'appendItem');

            this.collection = new TableList();
            this.collection.bind('add', this.appendItem);

            this.counter = 0;
            this.render();
        },

        render: function()
        {
            var self = this;
            $(this.el).append("<button id='add'>Add list item</button>");

            $(this.el).append("<ul></ul>");

            _(this.collection.models).each(function(item){ // in case collection is not empty
                self.appendItem(item);
            }, this);
        },

        addItem: function()
        {
            this.counter++;

            var note = new Note();

            note.set({part2: note.get('part2') + this.counter});

            this.collection.add(note);
        },

        appendItem: function(item)
        {
            var listRow = new ListRow({
                model: item
            });

            $('ul', this.el).append(listRow.render().el);
        }
    });

    var app = function(initialModels)
    {
        this.start = function()
        {
            this.tableList = new TableList();
            this.listView = new ListView({collection: this.tableList});
            this.tableList.reset(initialModels);
        };
    };

  return app;
})(Backbone, _);

then init the app with:

<script language="javascript">
    var app = new App([{"id":"95","note_title":"can we find the title"},{"id":"93","note_title":"some title"}]);
    app.start();
</script>

Answer 1

okay, there are a few issues with your code,

there are 2 issues in your start method,

a) you throw away your collection

this.start = function()
{
    this.tableList = new TableList();
    this.listView = new ListView({collection: this.tableList});
    this.tableList.reset(initialModels);
};

and then in intialize is where you overwrite the collection you pass along

initialize: function()
{
    _.bindAll(this, 'render', 'addItem', 'appendItem');
    this.collection = new TableList(); // this one gets overwritten, remove this line
}

b) you trigger a collection reset with the models you want to populate it with, but don't listen to an event, either add a listener like this:

this.collection.bind('reset', this.appendAllItems, this);

or create your collection like this:

this.start = function()
{
    this.tableList = new TableList(initialModels);
    this.listView = new ListView({collection: this.tableList});
};