Question

I’m using backbone and handlebars for templating and i’m new to this.
My current json is in the below format and the code works fine.

[
  {
    "id": "10",
    "info": {
        "name": "data10"
    }
  },
  {
    "id": "11",
    "info": {
        "name": "data11"
    }
  }

]

But when i change my json structure to something like shown below i’m having difficulty in getting things to be populated.

{
"total_count": "10",
"dataElements": [
    {
        "id": "10",
        "info": {
            "name": "data10"
        }
    },
    {
        "id": "11",
        "info": {
            "name": "data11"
        }
    }
]
}

How can i populate name, info and total_count keeping the current code structure ?

JSFiddle : http://jsfiddle.net/KTj2K/1/

Any help really appriciated.

Answer 1

A few things that you need to do in order for this to work.

Replace Backbone’s core ‘reset’ on your collection with a custom one that understands the data you are passing to it. For example:

reset: function (data) {
    this.totalCount = data.total_count;
    Backbone.Collection.prototype.reset.call(this, data.dataElements);
}

Now when you reset your collection, it will pull the total_count out of the object you are resetting it with, and use Backbone’s core reset with the dataElement array. Keep in mind you may have to do a similar thing with ‘parse’ if you’re intending on pulling this from the server.

I’d recommend that (if your example looks anything like the real code you’re working with) you reset your collection before getting to rendering.

var dataCollectionList = new dataCollection();
dataCollectionList.reset(jsonData);
var App = new AppView({model : dataCollectionList});

Now in your view’s “render” method you can grab the ‘totalCount’ property off the collection –

render : function() {
    //Should spit the total count into the element, just as an example
    this.$el.append(this.model.totalCount); 
    //or console.log it
    console.log(this.model.totalCount);
    return this;   
}

Voila. Side note – as someone who works with Backbone a lot, it drives me nuts when people set an attribute of something like “model” (i.e. peopleModel, itemModel, etc) and it ends up being a backbone collection. It’s much clearer to name it after what it is – though some MVC purists may disagree a bit.

Also, in this code block:

_.each(this.model.models, function (myData) {
            $(this.el).append(new ItemView({model:myData}).render().el);
        }, this);

You don’t need to do _.each(this.model.models.......). Since you’re working with a collection, the collection has a built in ‘each’ method.

this.model.each(function (myData) { ..... } , this);

Quite a bit cleaner.