JSON item to Backbone Model

Question

I'm using backbone.js. I get a json like this:

{
    first_name: 'David',
    last_name: 'Smith',
    family: [{father: 'David', mother: 'Rose', brother: 'Max'}]
}

first_name and last_name shows in through a PersonView (extending Backbone.View) and family data I want to show in a DetailsView.

So, I was trying like this. First:

personView = new PersonView(model: person)//person it's the json above

PersonView shows well. Then I want to pass the model to DetailsView like this:

detailsView = new DetailsView(model: JSON.parse(person.get('family'));

Well, when I try to pass the model to a template in DetailsView implementation, like this:

DetailsView = Backbone.View.extend({
    className: 'tab-pane',
    template: _.template($('#detail-tpl').html()),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
});

I get this message:

Uncaught TypeError: Object [object Object] has no method 'toJSON'

I don't know how to get or pass the model to solved this.

I'm trying several ways but I can't make it go.

Hope you can help me.

Answer 1

I think the problem is is because of this line.

model: JSON.parse(person.get('family')

It expects model to be an instance of backbone Model . But I don't think that is the case here.. try defining the Model for family or otherwise change the name of the key

Instead try this approach

familyMembers : JSON.parse(person.get('family')

In your view you can access this as

(this.options.familyMembers.toJSON())

Answer 2

The issue is that you model you are passing in is just an array. Therefore doesn't have the .toJSON method. As grant suggested you could use new Backbone.Model when creating the view but I would recommend using a collection and 2 new views for the family. It would look something like this.

    var PersonModel = Backbone.Model.extend({
     initialize: function(attributes, options) {
      if(attributes.family) {
       this.family = new FamilyCollection(attributes.family, options);
      }
     }
    });

    var FamilyCollection = Backbone.Collection.extend({
     model: FamilyMember,
     initialize: function(models, options) {
      this.view = new FamilyView(options);
     }
    });

    var FamilyMember = Backbone.Model.extend({
     initialize: function(attributes, options) {
      this.view = new DetailedView({
       model: this


    });
     }
});

Then you would use a view structure something like this..

<div class="person">
 <span class="name-first">David</span> <span class="name-last">Smith</span>
 <div class="family-members>
  <div class="family-member">
    <span class="name-first">Rose</span> <span class="name-last">Smith</span>
  </div>
  <div class="family-member">
    <span class="name-first">David</span> <span class="name-last">Smith</span>
  </div>
  <div class="family-member">
    <span class="name-first">Max</span> <span class="name-last">Smith</span>
  </div>
 </div>
</div>