Develop Reference

Get a model by ID from a collection in backbone js

I'm trying to figure it out how to get a model by it's id and display the same to view. I have setup my router to get the data by id. I tried a lot but unable to find a solution. Any idea on this would be appreciated.
collection.js file:
app.Collections.qualityCollection = Backbone.Collection.extend({
model: app.Models.qualityModel,
url: "http://localhost/socialapp/php/fetch.php"
});
var userCollections = new app.Collections.qualityCollection();
userCollections.fetch();
router.js file:
app.Routers.socialRouter = Backbone.Router.extend({
routes: {
"" : "homePage",
"make_friends/:id" : "userProfile",
},
userProfile: function() {
new app.Views.idView({ model: userCollections.get(id) });
}
});
new app.Routers.socialRouter();
Backbone.history.start();
view.js file:
app.Views.idView = Backbone.View.extend({
el: $("#app"),
template: _.template($('#public-profile').html()),
initialize: function(){
this.render();
},
render: function () {
console.log(this.model); /// undefined
this.$el.html(this.template( this.model.toJSON() ));
return this;
}
});
JSON Data from the URL:
[
{
"id": "1",
"firstname": "Abc",
"lastname": "Xyz"
},
{
"id": "2",
"firstname": "Klm",
"lastname": "Opq"
}
]
Expected Router Link: http://localhost/socialapp/#/make_friends/2

To answer your question, you receive the value of route param in the callback. You can just pass it to the view and access it in it's initialize
app.Routers.socialRouter = Backbone.Router.extend({
routes: {
"" : "homePage",
"make_friends/:id" : "userProfile",
},
userProfile: function(id) {
// no reference?
new app.Views.idView({ collection: userCollections, modelId: id });
}
});
If you're view is actually an item view, you don't need to pass the entire collection, you can just do the following after fetching the collection in router.
new app.Views.idView({ model: userCollections.get(id) });
Better yet, your view don't need a collection, you just need a model instance with an end point that returns a model's info

userCollections.get(id) should work.
Considering Id is attribute of the model, you can find the model as below too.
userCollections.find(function(model) { return model.get('id') === Id; });

Viewing in backbone data from RESTful service

I am trying to view the collection i import from the service, using backbone on the client side, and python/flask as the service. When i make the GET request, i get the following data back:
{"entries": [{"Title": "my title 1", "Description": "My desc 1", "Info": "Info 1", "ids": 1}, {"Title": "my title 2", "Description": "My desc 2", "Info": "Info 2", "ids": 2}]}
But those entries are not showing on my page, even though i use fetch. This is my ListView code:
var app = app || {};
app.ContactListView = Backbone.View.extend({
el: '#contacts',
initialize: function () {
this.collection = new app.ContactList();
this.collection.fetch({reset: true});
this.render();
this.listenTo( this.collection, 'reset', this.render );
},
render: function () {
this.collection.each(function( item ){
this.renderContact( item );
}, this );
},
renderContact: function ( item ) {
var contactView = new app.ContactView({
model: item
});
this.$('#ContactTable').append( contactView.render().el );
}
});
What might be the cause?

The reason is because your collection is expecting an array of models as it's response but your service is returning the array under entries. From the documentation
parse is called by Backbone whenever a collection's models are
returned by the server, in fetch. The function is passed the raw
response object, and should return the array of model attributes to be
added to the collection.
To work around that you can simply override your parse method to return the array of models.
For example:
app.ContactList = Backbone.Collection.extend({
//...
parse: function (response) {
return response.entries;
}
})

Backbone.js render collection in View, but can't access data

I have a Backbone Collection that represent a json objects and I'm trying to render this objects in the View that would iterate them into template. I think the breakpoint was that i can't read the json array into array
The collection return array
{
"calls": [
{
"callId": "173",
"company": "Company 1",
"status": "open",
"DueDate": "2013-06-10 00:00:00",
"EmployeeId": "12"
},
{
"callId": "170",
"company": "company 2",
"status": "done",
"DueDate": "2013-05-27 14:27:37",
"EmployeeId": "11"
},
{
"callId": "169",
"company": "Company 3",
"status": "open",
"DueDate": "2013-05-20 00:00:00",
"EmployeeId": "11"
}
]
}
Route
// Filename: router.js
define([
'jquery',
'underscore',
'backbone',
'app/collections/schedule',
'app/views/schedule',
'app/views/dashboard'
], function($, _, Backbone, ScheduleCollection, ScheduleView, DashboardView) {
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'dash': 'defaultRoute',
'schedule': 'scheduleRoute',
'accounts': 'accountsRoute',
'reports': 'reportsRoute',
// Default
'*actions': 'defaultRoute'
},
scheduleRoute: function() {
// Create a new instance of the collection
// You need to set the url in the collection as well to hit the server
var schedulecollection = new ScheduleCollection();
// Pass in the collection as the view expects it
var scheduleview = new ScheduleView({
collection: schedulecollection
});
//scheduleview.initialize();
// No need of calling render here
// as the render is hooked up to the reset event on collection
},
defaultRoute: function(actions) {
// We have no matching route, lets display the home page
DashboardView.render();
}
});
var initialize = function() {
var app_router = new AppRouter;
Backbone.history.start();
};
return {
initialize: initialize
};
});
Collection
// Filename: collections/schedule
define([
'jquery',
'underscore',
'backbone',
'app/models/schedule'
], function ($, _, Backbone, ScheduleModel) {
var ScheduleCollection = Backbone.Collection.extend({
model: ScheduleModel,
url: "http://sam-client:8888/sam-client/i/schedule",
initialize: function () {
//console.log('schedule collections loaded successfully');
}
});
return ScheduleCollection;
});
View
// Filename: views/schedule
define([
'jquery',
'underscore',
'backbone',
'text!templates/schedule.html'
], function ($, _, Backbone, ScheduleTemplate) {
var scheduleView = Backbone.View.extend({
el: $("#test"),
initialize: function () {
// Listen to the reset event which would call render
this.listenTo(this.collection, 'reset', this.render());
// Fetch the collection that will populate the collection
// with the response
this.collection.fetch();
},
render: function () {
var data = {
schedule: this.collection.models,
_: _
};
var compiledTemplate = _.template(ScheduleTemplate, data);
this.$el.html(compiledTemplate);
}
});
return scheduleView;
});
in The template
<ul>
<% _.each(schedule, function(call){ %>
<li><%= call.get("company") %> - <%= call.get("DueDate") %></li>
<% }); %>
</ul>
The problem is there is no data passed in the template in order to iterate if it

The behavior of Collection#fetch changed in Backbone 1.0:
fetch collection.fetch([options])
[...] When the model data returns from the server, it uses set to (intelligently) merge the fetched models, unless you pass {reset: true}, in which case the collection will be (efficiently) reset.
So just this:
this.collection.fetch()
will trigger 'add', 'remove', and 'change' events in Backbone 1.0+ rather than a single 'reset' event like older versions of Backbone. If you say:
this.collection.fetch({ reset: true })
then you'll get your 'reset' event.
The next problem is your JSON format. Backbone collections expect the incoming data to be a simple array of model attribute objects but your JSON has the array nested inside "calls". You can provide a parse method in your collection to unwrap things:
parse: function(response) {
return response.calls;
}
You'd want that method inside your ScheduleCollection.

Mapping JSON to backbone.js collections

Alright, it looks like I need a hint to point me in the right direction. This question is two part - working with mult-dimensional JSON and Collections of Collections from JSON.
Background
I have some JSON that is going to be retrieved from a server and have control over how it could be formatted.
Multi-Dimentional JSON
I'm having some trouble being able connecting the model to the parts in the JSON. Say I wanted to render just each of the posts author name, and the content of status in the sample JSON below. I'm having no problem getting the status into the model, but the author name I'm a bit confused how to get to it. From my understanding I have to override the parse.
Is this bad standards / is there a better JSON structure I should use? Would it be better to keep it as flat as possible? That is move the author name and photo up one level?
I was reading How to build a Collection/Model from nested JSON with Backbone.js but it is still a little unclear to me.
Collection in Collections
Is there a nice way to make a collection within a collection for backbone.js? I will have a collection of posts, and then would have a collection of comments on that post. As I'm developing in backbone is that even possible?
From what I understand in Backbone.js Collection of Collections and Backbone.js Collection of Collections Issue, it would look something like this?
var Comments = Backbone.Model.extend({
defaults : {
_id : "",
text : "",
author : ""
}
})
var CommentsCollection = Backbone.Collection.extend({ model : Comments })
var Posts = Backbone.Model.extend({
defaults : {
_id : "",
author : "",
status : "",
comments : new CommentsCollection
}
})
var PostsCollection = Backbone.Collection.extend({ model : Posts })
Sample JSON
{
"posts" : [
{
"_id": "50f5f5d4014e045f000002",
"author": {
"name" : "Chris Crawford",
"photo" : "http://example.com/photo.jpg"
},
"status": "This is a sample message.",
"comments": [
{
"_id": "5160eacbe4b020ec56a46844",
"text": "This is the content of the comment.",
"author": "Bob Hope"
},
{
"_id": "5160eacbe4b020ec56a46845",
"text": "This is the content of the comment.",
"author": "Bob Hope"
},
{
...
}
]
},
{
"_id": "50f5f5d4014e045f000003",
"author": {
"name" : "Chris Crawford",
"photo" : "http://example.com/photo.jpg"
},
"status": "This is another sample message.",
"comments": [
{
"_id": "5160eacbe4b020ec56a46846",
"text": "This is the content of the comment.",
"author": "Bob Hope"
},
{
"_id": "5160eacbe4b020ec56a46847",
"text": "This is the content of the comment.",
"author": "Bob Hope"
},
{
...
}
]
},
{
...
}
]}
I appreciate even any hints to guild me. Thanks!

It can be overwhelming when trying to write up code to make it work for nested objects. But to make it simpler lets break it up into smaller manageable pieces.
I would think in these lines.
Collections
Posts
Comments
Models
Post
Comment
Author
Main collection -- Posts collection
(Which contains list of Post Models)
And each model in the Posts collection will have 3 sets of attributes(May not be the right term).
1st - level of attributes (status , id).
2nd - Author attribute which can be placed in a separate Model(Authod Model).
3rd - Collection of comments for each Post Model.
Collection in Collections would be a bit confusing here.
As you would have Models in Collection(Post Model inside Posts Collection) and each Model will nest a collection again(Comments collection inside Post Model). Basically you would be Handling a Collection inside a Model.
From my understanding I have to override the parse.
Is this bad standards / is there a better JSON structure I should use?
It is a perfectly plausible solution to handle the processing this in the Parse method. When you initialize a Collection or a Model , Parse methods is first called and then initialize is called. So it is perfectly logical to handle the logic inside the Parse method and it is not at all a bad standard.
Would it be better to keep it as flat as possible?
I don't think it is a good idea to keep this flat at a single level, as the other data is not required on the first level in the first place.
So the way I would approach this problem is write up the parse method in the Post Model which processes the response and attach the Author model and Comments collection directly on the Model instead as an attribute on the Model to keep the attributes hash clean consisting of 1st level of Post data. This I feel will be cleaner and lot more scalable on the long run.
var postsObject = [{
"_id": "50f5f5d4014e045f000002",
"author": {
"name": "Chris Crawford",
"photo": "http://example.com/photo.jpg"
},
"status": "This is a sample message.",
"comments": [{
"_id": "5160eacbe4b020ec56a46844",
"text": "This is the content of the comment.",
"author": "Bob Hope"
}, {
"_id": "5160eacbe4b020ec56a46845",
"text": "This is the content of the comment.",
"author": "Bob Hope"
}]
}, {
"_id": "50f5f5d4014e045f000003",
"author": {
"name": "Brown Robert",
"photo": "http://example.com/photo.jpg"
},
"status": "This is another sample message.",
"comments": [{
"_id": "5160eacbe4b020ec56a46846",
"text": "This is the content of the comment.",
"author": "Bob Hope"
}, {
"_id": "5160eacbe4b020ec56a46847",
"text": "This is the content of the comment.",
"author": "Bob Hope"
}]
}];
// Comment Model
var Comment = Backbone.Model.extend({
idAttribute: '_id',
defaults: {
text: "",
author: ""
}
});
// Comments collection
var Comments = Backbone.Collection.extend({
model: Comment
});
// Author Model
var Author = Backbone.Model.extend({
defaults: {
text: "",
author: ""
}
});
// Post Model
var Post = Backbone.Model.extend({
idAttribute: '_id',
defaults: {
author: "",
status: ""
},
parse: function (resp) {
// Create a Author model on the Post Model
this.author = new Author(resp.author || null, {
parse: true
});
// Delete from the response object as the data is
// alredy available on the model
delete resp.author;
// Create a comments objecton model
// that will hold the comments collection
this.comments = new Comments(resp.comments || null, {
parse: true
});
// Delete from the response object as the data is
// alredy available on the model
delete resp.comments;
// return the response object
return resp;
}
})
// Posts Collection
var Posts = Backbone.Collection.extend({
model: Post
});
var PostsListView = Backbone.View.extend({
el: "#container",
renderPostView: function(post) {
// Create a new postView
var postView = new PostView({
model : post
});
// Append it to the container
this.$el.append(postView.el);
postView.render();
},
render: function () {
var thisView = this;
// Iterate over each post Model
_.each(this.collection.models, function (post) {
// Call the renderPostView method
thisView.renderPostView(post);
});
}
});
var PostView = Backbone.View.extend({
className: "post",
template: _.template($("#post-template").html()),
renderComments: function() {
var commentsListView = new CommentsListView({
// Comments collection on the Post Model
collection : this.model.comments,
// Pass the container to which it is to be appended
el : $('.comments', this.$el)
});
commentsListView.render();
},
render: function () {
this.$el.empty();
// Extend the object toi contain both Post attributes
// and also the author attributes
this.$el.append(this.template(_.extend(this.model.toJSON(),
this.model.author.toJSON()
)));
// Render the comments for each Post
this.renderComments();
}
});
var CommentsListView = Backbone.View.extend({
renderCommentView: function(comment) {
// Create a new CommentView
var commentView = new CommentView({
model : comment
});
// Append it to the comments ul that is part
// of the view
this.$el.append(commentView.el);
commentView.render();
},
render: function () {
var thisView = this;
// Iterate over each Comment Model
_.each(this.collection.models, function (comment) {
// Call the renderCommentView method
thisView.renderCommentView(comment);
});
}
});
var CommentView = Backbone.View.extend({
tagName: "li",
className: "comment",
template: _.template($("#comment-template").html()),
render: function () {
this.$el.empty();
this.$el.append(this.template(this.model.toJSON()));
}
});
// Create a posts collection
var posts = new Posts(postsObject, {parse: true});
// Pass it to the PostsListView
var postsListView = new PostsListView({
collection: posts
});
// Render the view
postsListView.render();
Check Fiddle

(Edited to correct my initial misreading of the question.)
There's no need to override parse method of the model unless you want to change its structure. But it sounds like you don't need to -- to render the author name, just use author.name in the view:
<%= author.name %>
As far as initializing the nested collection, your approach is exactly right. All you have to do is convert the JSON object to Backbone models, and pass them to the PostsCollection (the Backbone.Collection constructor accepts an array of Backbone models, not raw JSON). One way of doing this is to use map:
var postModels = json.posts.map(function(post) { return new Posts(post); });
var posts = new PostsCollection(postModels);
Note that you'll need to do something similar in the initialize method of the Posts model -- retrieve the comments JSON array, and convert it to an array of Comments models:
initialize: function() {
if (attributes.comments && attributes.comments.length > 0) {
var commentModels = attributes.comments.map(function(comment) {
return new Comments(comment);
});
this.set("comments", new CommentsCollection(commentModels));
}
}
Here is working example.

Update, I found a SuperModel for backbone which provides relationships between models and between collections. It has proved to be a great solution for Collections within Collections as well as Deep Nested Model data.
Models are pre-defined with their relationships to other models via key. During the initialize/parse of the model any values in the JSON at that key gets passed off to a new related model or collection. A relationship is created between the two models/collections.
This means with the above example we can do something like this with our models:
Setup
var Author = Supermodel.Model.extend({});
var Post = Supermodel.Model.extend({});
var Comment = Supermodel.Model.extend({});
var Posts = Backbone.Collection.extend({
model: function(attrs, options) {
return Post.create(attrs, options);
}
});
var Comments = Backbone.Collection.extend({
model: function(attrs, options) {
return Comment.create(attrs, options);
}
});
Post.has().one('author', {
model: Author,
inverse: 'post'
}).many('comments', {
collection: Comments,
inverse: 'post'
});
//reverse relationships could also be setup
Usage
var posts = new Posts( postsObject ); //where postsObject is an array of posts
//With SuperModel, we are able to navigate the related models
posts.first().comments();
posts.first().comments().author();
posts.last().author();
Fiddle
Working Example in JSFiddle

Setting my model with Backbone.js

I'm attempting to use Backbone.js to simplify data (JSON) management and interaction with DOM.
Firstly, I'm not sure if Backbone.js can indeed simplify and improve the current process, but I'd like to assume it can.
Previously I'm retrieving the data with jQuery AJAX function. Now, I'm retrieving the data(still with AJAX) Backbone style into the Backbone model.
For update, previously I was parsing through the JSON object itself to update data. I would then send back the updated json to the back-end (just as I've received it).
Now, is it possible to use the set function in Backbone to simplify something like the below and ideally where should the set attribute behaviour (and all other UI bindings like change events) be constructed? Would it be on the fetch() success handler, which is in the View initializer?
function setBucketOffer(bucketName, newId) {
var segments = json.segments;
for (var i = 0; i < segments.length; i++) {
if (segments[i].market.toLowerCase() === g_market) {
var genders = segments[i].gender;
for (var i = 0; i < genders.length; i++) {
if (genders[i].name.toLowerCase() === g_segment) {
var buckets = genders[i].buckets;
for (var i = 0; i < buckets.length; i++) {
if (buckets[i].name === bucketName) {
buckets[i].confirm = newId;
return;
}
}
}
}
}
}
}
Example JSON
{
"segments": [
{
"market": "Market1",
"gender": [
{
"name": "male",
"buckets": [
{
"name": "Market1_M_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": ""
},
{
"name": "Market1_M_North",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": ""
}
]
},
{
"name": "female",
"buckets": [
{
"name": "Market1_F_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
}
]
}
]
},
{
"market": "Market2",
"gender": [
{
"name": "male",
"buckets": [
{
"name": "Market2_M_CBD",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
},
{
"name": "Market2_M_North",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
},
{
"name": "Market2_M_South",
"subscribers": "50,000",
"postcode": "20000-2010",
"lastsend": "13/03/12 4:30PM",
"suggest": "10054",
"confirm": "10054"
}
]
}
]
}
]
}
Edit 1
From here, I'm trying to make good use of Parse and to get just segments from my JSON:
var Offers = Backbone.Collection.extend({
url: 'URL',
parse: function (response) {
return response.segments;
}
});
Here, I'm getting more than just response.segments. Also not sure if it's right for me to use the render function or fetch success function to populate the DOM. Suppose I have my html template in the DOM... I want to clone it using jQuery clone() and populate the clone using a forEach on segments, and push back all the clones into the html body. Is this workable in backbone, how would you do it? (I'm able to do this without backbone.js, but would like to see how I can improve with backbone.js, and bind all the data on the clones to model changes)
var OfferView = Backbone.View.extend({
initialize: function () {
this.model = new Offers();
this.model.fetch({
success: function (collection, response) {
console.log(response);
}
});
this.model.on('change', this.modelChange);
this.model.on('change', this.render);
this.modelChange = function () {
alert('model changed');
};
},
render: function () {
}
});
Edit 2
I'm up to creating individual views through a forEach but am having trouble inserting these back into the DOM. What am I doing wrong? (Not sure around the return this part)
// DEFINE VIEW
var OfferView = Backbone.View.extend({
initialize: function () {
this.model = new Offers();
this.model.fetch();
this.model.on('change', this.modelChange);
this.model.on('change', this.render);
this.modelChange = function () {
alert('model changed');
};
this.render();
},
render: function () {
var self = this;
this.model.forEach(function (s) {
var view = new OfferMarketView({
id: "container" + s.get('name').toLowerCase().replace(/\s*/g, '')
});
$('#leftCol').append(view.el);
});
return this;
}
});
var OfferMarketView = Backbone.View.extend({
tagName: "div",
className: "marketContainer",
events: {},
render: function() {
}
});

Whenever you call fetch on a model the response is passed through a parse method that can be defined in your model. parse takes one parameter, the ajax response:
parse: function(response) {
}
In that function you can do whatever you want with the data that comes back from your ajax request and eventually return that object. The object returned by the parse method will be set on your model.
For event binding, you'll want to do that in your view. In the initialize method of your view you can do something like:
this.collection.on("change", this.someFunction);
Now, any time something causes that model to trigger its change event someFunction ( also defined in your view ) will run.
EDIT
The sample json you added to the question looks to be pretty normalized. With that data, I'd be fetching it into a collection. If that's the structure you want your models to look like then you don't need to do much parsing.
in you collection file if you create a parse method that does the following:
parse: function(response) {
return response.segments;
}
When you call your fetch, this.collection.fetch() on a successful request, your collection will be filled with models that contain attributes in a structure that matches your response.
EDIT 2
Your binding looks ok.
in this section of code:
this.collection.fetch({
success: function (model, attributes) {
initAll(attributes);
// populate ui with attributes from model
}
})
The parameters that are passed back on a success in a collection fetch are (collection, response) collection is the result of collection call and what this.collection will end up being. response is the response of your ajax request.
I'm not sure what initAll(attributes) is supposed to be doing. If you add a parse method like I posted above, your collection will contain a set of models with the attributes of each segment.
Also, rather than calling this.render() at the end, you could do bind render to the change event:
this.collection.on('change', this.render);
That way any time your collection changes, that view will automatically render again so your changes will show up.