Question

In my Application, I have the following JSON data format:

{
    Item: {
        property1: '',
        ...
    }
}

Following the solution of this stackoverflow.com answer, I modeled my Backbond.js models the following way:

App.Models.Item = Backbone.Model.extend({

});

App.Models.ItemData = Backbone.Model.extend({
    defaults: {
        'Item': new App.Models.Item
    }
});

I now want to bootstap the data to my App from the Backend system on the page load the following way:

var item = App.Models.ItemData({
    {Item: 
        {property1: 'data'}
    }
});

The problem I have now is that item.get('Item') returns a plain JavaScrip object and not a Backbone.Model object, because the defaults are overwritten. How can I create the Backbone.js object while ensuring that item.get('Item') is an App.Models.Item object?

I also have read that if you nest Backbone.Models, you should wirite custom getter methods, so the rest of your app dose not have to know about the internal data structure. If so, what is the right way to implement those setters and getters?

Answer 1

You can override the parse method on your ItemData model. No defaults required. The parse method will initialize an empty model, if one is not passed:

App.Models.ItemData = Backbone.Model.extend({
   parse: function(attrs) {
     attrs = attrs || {};
     if(!(attrs.Item instanceof App.Models.Item))
       attrs.Item = new App.Models.Item(attrs.Item);

     return attrs;
   }
});

And then initialize your ItemData model with the option parse:true:

var item = new App.Models.ItemData({Item:{property1: 'data'}}, {parse:true});