Loading initial data in Backbone.js

Question

I'm new to backbone.js and MVC so apologise if this is a silly question...

I have been experimenting with some of the backbone.js tutorials out there and am trying to work out how to load an initial set of data onto the page.

If anyone could point me in the right direction or show me the what I'm missing below, it would be greatly appreciated!

Thanks!

The code is below or at: http://jsfiddle.net/kiwi/kgVgY/1/

The HTML:

Add list item

The JS:

 (function($) {
   Backbone.sync = function(method, model, success, error) {
     success();
 }

var Item = Backbone.Model.extend({
    defaults: {
        createdOn: 'Date',
        createdBy: 'Name'
    }
});


var List = Backbone.Collection.extend({
    model: Item
});


//    ------------
//    ItemView
//    ------------
var ItemView = Backbone.View.extend({
    tagName: 'li',
    // name of tag to be created        
    events: {
        'click span.delete': 'remove'
    },

    // `initialize()` now binds model change/removal to the corresponding handlers below.
    initialize: function() {
        _.bindAll(this, 'render', 'unrender', 'remove'); // every function that uses 'this' as the current object should be in here
        this.model.bind('change', this.render);
        this.model.bind('remove', this.unrender);
    },

    // `render()` now includes two extra `span`s corresponding to the actions swap and delete.
    render: function() {

        $(this.el).html('<span">' + this.model.get('planStartDate') + ' ' + this.model.get('planActivity') + '</span> &nbsp; &nbsp; <span class="delete">[delete]</span>');
        return this; // for chainable calls, like .render().el
    },

    // `unrender()`: Makes Model remove itself from the DOM.
    unrender: function() {
        $(this.el).remove();
    },

    // `remove()`: We use the method `destroy()` to remove a model from its collection.
    remove: function() {
        this.model.destroy();
    }
});


//    ------------
//    ListView
//    ------------
var ListView = Backbone.View.extend({
    el: $('body'),
    // el attaches to existing element
    events: {
        'click button#add': 'addItem'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
        this.collection = new List();
        this.collection.bind('add', this.appendItem); // collection event binder
        this.render();
    },

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

    addItem: function() {
        var item = new Item();

        var planStartDate = $('#planStartDate').val();
        var planActivity = $('#planActivity').val();

        item.set({
            planStartDate: planStartDate,
            planActivity: planActivity
        });

        this.collection.add(item);
    },

    appendItem: function(item) {
        var itemView = new ItemView({
            model: item
        });
        $('ul', this.el).append(itemView.render().el);
    }
});

var listView = new ListView();
 })(jQuery);

Thanks.

Answer 1

Here's the modified example: http://jsfiddle.net/kgVgY/2/

You create the collection first with the data you want

 var list = new List([{
        createdOn: 'Jan',
        createdBy: 'John',
    planStartDate: "dfd",
    planActivity: "dfdfd"
    }]);

and then pass the collection to the view you want

var listView = new ListView({collection: list});

That's about all you had wrong in this code. Few minor unrelated notes:

• You were using _(this.collection.models).each. Backbone collections use underscore to expose all those functions on themselves, so that is equivalent to this.collection.each

• You don't really need the "unrender" method on the ItemView but since you aren't using that I'm guessing you're using it for debugging.