backbone.js getting data into collection and template

Asked By: Anonymous

i am new to backbone.js and need a little help sending data to a template. Im using a model with fetch, and a collection. here is the code :

(function($) {

var UserModel = Backbone.Model.extend({
    urlRoot : '/users',
    defaults : {
        name : '',
        email : ''
    },

    initialize : function() {
        _.bindAll(this);
        this.fetch();
    },
    parse : function(res) {
        return JSON.stringify(res);
    },

});

var users_coll = Backbone.Collection.extend({
    //model: UserModel
    initialize : function() {
        var u = new UserModel();
        this.model = u;
    }
});

var displayView = Backbone.View.extend({

    initialize : function() {

        this.collection = new users_coll();
        //_.each(this.collection.models, alert);
        //console.log(this.collection);
        //alert(JSON.stringify(this.collection.models));

        this.render();
    },
    render : function() {
        var tmpl = _.template($("#data-display-tpl").html());
        this.$el.html(tmpl);

    }
});

var view = new displayView({
    el : $("#data-display")
});

     })(jQuery);

it’s working fine upto the model part. In the parse function of the model, i have used console.log() and everything seems fine. i get a properly formated json, and the fetch works fine too.

however in my collection i get nothing when i try console.log(user_coll.models).
i think i am probably missing something really small. not sure what, maybe the flow of things is all wrong.

Solution

Answered By: Anonymous

A collection’s model attribute is meant for specifying what type of model the collection will contain and if specified you can pass the collection an array of raw objects and it will add and create them. From the docs

Override this property to specify the model class that the collection
contains. If defined, you can pass raw attributes objects (and arrays)
to add, create, and reset, and the attributes will be converted into a
model of the proper type

So when in your code you have

  var u = new UserModel();
  this.model = u;

You aren’t actually adding the model to the collection. Instead you can use the collections add or fetch methods.