modify collection result in backbone - backbone.js

Question

Now I have a returned collection data like:
[{'category':1,
'title':"Current Company",
'people':{"count":2,
"keyword":"",
"executiveInfos":[{"name":"Darren Suomi",
"title":"Global Vice President of Sales",
"companyId":2867257,
"employmentId":10993552,
"executiveId":10152454,
"imageUrl":"https://d1tzls7byl3ryp.cloudfront.net/iv/profileImages/executiveImage/321446",
"count":0,
"executiveConnectionImageUrls":[],
"trackedByWatchlists":[],
"employmentType":0},
{"name":"Gregory Gunn",
"title":"Vice President of Business Development",
"companyId":2867257,
"employmentId":9240823,
"executiveId":9049103,
"imageUrl":"https://d1tzls7byl3ryp.cloudfront.net/iv/profileImages/executiveImage/292479",
"count":0,
"executiveConnectionImageUrls":[],
"trackedByWatchlists":[],
"employmentType":0}]***}
},
{'category': 2,
'title':"Former Company",
'people':{"count":0,
"finance":0,
"otherFunction":0,
"keyword":"",
"executiveInfos":[]}
},
{'category': 4,
'title':"Family Tree Company",
'people':{"count":0,
"keyword":"",
"executiveInfos":[]}
}
]
In the data, it has 3 categories, in each category it has an attribute named people, now I
want to list the executiveInfos of people in each category, my listview is:
var PeopleListView = Backbone.View.extend({
el: $('.bucketContent'),
initialize: function(){
this.listenTo(this.collection, 'reset', this.render);
}
render: function() {
this.collection.each( function( $model) {
var itemview = new PeopleItemView({model : $model});
this.$el.prepend(itemview.render().el);
}, this);
return this;
}
});
what should I do? thank you.

Answer 1

Without knowing what PeopleItemView does, it is difficult to give you a proper answer. However, assuming that you are implementing this view correctly, you would need to ensure that you are properly passing over all of the model attributes to your template.
For example, assuming that the PeopleItemView view looks something like this:
var PeopleItemView = Backbone.View.extend({
this.template = JST["the_template_name"];
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
You could then iterate through executiveInfos through the template itself. In Handlebars this would look like:
{{#each people.executiveInfos}}
<span>{{name}}</span>
<span>{{title}}</span>
<span>{{companyId}}</span>
<span>{{employmentId}}</span>
<span>{{executiveId}}</span>
...
{{/each}}