We Keep Coding

Backbone.js adding model retrieved from server to a collection

I would like to know if it possible to add a model to a collection in the following manner.
I tried it and it doesn't work. If I add the JSON [] directly it does. I know this is a little strange but I am trying to get a better understanding of how BB works. Thanks.
var UserModel = Backbone.Model.extend({
urlRoot: '/users',
});
var UserModels = Backbone.Collection.extend({
url: '/users',
model: UserModel
});
var user = new UserModel({id:1});
user.fetch({ // get the model
success: function (user) {
var users = new UserModels();
users.add(user); // add the model to a collection
}
});
The following model is being echoed from the server:
[{"name":"john","email":"john#bb.com"}]

Since the response from the server is an array with a single element, you will need to add a parse function that returns the first element of the array:
var UserModel = Backbone.Model.extend({
urlRoot: '/users',
parse: function(response){
if(response && response.length) return response[0];
}
});
That should allow the model to correctly parse the attributes in this response from the server: [{"name":"john","email":"john#bb.com"}].
By the way, you are creating the users collection in the success function, so it won´t be available outside that function. It might just be the sample code you posted, but you could create the users collection outside and just add the model in the success function:
var users = new UserModels();
var user = new UserModel({id:1});
user.fetch({ // get the model
success: function (user) {
users.add(user); // add the model to a collection
}
});
I have created a fiddle so you can give it a try. (I have used fiddle echo service, so thats why I have changed the url and it is using a POST). If you run it and check the console, you will see the users collection being logged and you can check its models property.

Multiple Backbone.js collection options?

Intro:
Building in node.js and express on the backend, I am sending a res.json(details) to the localhost:3000/me route containing the users session information.
So that on the client side I can work with that specific user, for example on the client side initialization I write some code like this.
var me = new MeModel();
me.fetch({
success: function(response) {
App.data.me = me;
var messages = new MessagesCollection([], { id: response.get('user_id') });
messages.fetch({
success: function() {
App.data.messages = messages;
App.core.vent.trigger('app:start');
}
});
}
});
You see I fetch the me model and use that to filter the messages in the MessagesCollection.
Question:
In my MessagesCollection I pass options like this.
module.exports = MessagesCollection = Backbone.Collection.extend({
initialize: function(models, options) {
this.id = options.id;
},
url: function() {
return '/api/messages/' + this.id;
},
model: MessageModel,
//url: '/api/messages'
});
This is great for getting the desired models when using var messages = new MessagesCollection([], { id: response.get('user_id') });
My question is when somewhere else I run window.App.data.messages.create(Message); this wants to POST to /api/messages/:id when I want to POST to the regular collection?
Theory:
So obviously I would say the best thing is to rethink how I filter the models in the fetch method.
So basically to simplify this question I need to filter the collection upon .fetch() GET... and set no filters upon .create() POST
BTW I am using marionette, maybe that can help with something?

model.url() Returns the relative URL where the model's resource
would be located on the server. If your models are located somewhere
else, override this method with the correct logic. Generates URLs of
the form: "[collection.url]/[id]" by default, but you may override by
specifying an explicit urlRoot if the model's collection shouldn't be
taken into account.
Delegates to Collection#url to generate the URL, so make sure that you
have it defined, or a urlRoot property, if all models of this class
share a common root URL. A model with an id of 101, stored in a
Backbone.Collection with a url of "/documents/7/notes", would have
this URL: "/documents/7/notes/101"
http://backbonejs.org/#Model-url
So you can define method url at MeModel and generate url there ( if there are no other users - you can just return string "/me" or generate in based on model properties ( for example switch if model has id )

Javascript Backbone model design

Fairly new to JavaScript so it might be a noobish question.
At the moment for my project I'm using NodeJS for my server and Backbone for the client. The client will send a request to the server and the server will send list of files in the server, my aim was to simply return the list of files and when user click on the file it will send another request to the server to load the file.
Currently in the client level my model and collection is defined something like:
app.MyFile = Backbone.Model.extend({
defaults: {
modifiedDate: new Date(),
path: '',
content: '' // content of the file
}
});
var MyFileList = Backbone.Collection.extend({
model: app.MyFile,
url: '/api/files'
});
// create global collection of files
app.MyFiles = new MyFileList();
app.AppView = Backbone.View.extend({
initialize: function () {
// fetch all files
app.MyFileList.fetch();
}
});
// app.js (point of entry)
$(function() {
// Kick things off by creating the **App**.
new app.AppView();
});
And my server code:
var application_root = __dirname,
express = require("express"),
...
app.get('/api/files', function(req, res) {
...
// return file list
}
app.get('/api/files/:id', function(req, res) {
...
// return file content?
}
Since it doesn't make sense to load all files in the directory and send it back to the client, what I did was I created the model in the server and fill up modifiedDate and path while leaving content to null. But the problem now is that how do I fill up the content when user clicks on the file? I'm not sure how to manually send an HTTP request from Backbone View or controller. Or is there any better way of doing this? One way that I can think of is to create another model that only keeps modifiedDate and path but to me this looks very verbose and repetitive.

Given what you have on the client side, you may not need anything more.
app.MyFiles = new MyFileList();
app.MyFiles.fetch().done(function() {
// your collection is fetched but each model's content is empty.
// now, I assume at this point you will show them in some view/views.
});
Now when one of those things is clicked on, you can fetch the content.
var model = app.MyFiles.get(id);
model.fetch().done(function() {
// now the model's content attribute will be set
});
This might work with no more code than what you showed. Because the url a model uses to fetch is created by default by appending the model's id to the end of its collection's url.
So from your server, you return a json array from '/api/files': [{id:1, path:'foo'}, {id:2, path:'bar'}]
Then from '/api/files/1': {id:1, path:'foo', content:'whatever'}

When user clicks the file, you can call backbone's fetch method on the model. Then your model will be filled with data from the server.
Note that for this to be working you should return collection from the server first, where models at least have id's. Every other field will be filled after fetch call. Also, you should override model url, if it differs from standard (which is collection/id).

backbone.js collection sync with server

I'm trying to figure out how to make a backbone.js Collection stay synchronized with a server at the end of an url.
I would like to be able to add a model to a collection and have the collection automatically do a POST with the new model to the collection url...
I cant seam to find the functionality for this anywhere.

Models are never saved to the collection endpoint, they have their own url property to configure where they are saved.
Instead of calling add on the collection then save on the model, you can just call create on the collection and it'll do both, but you must configure the model's URL.
var MyModel = Backbone.Model.extend({
urlRoot: '/some/path'
});
var MyCollection = Backbone.Collection.extend({
url: '/some/path',
model: MyModel
});
var instance = new MyCollection();
instance.fetch(); //fetches at /some/path
// ...
instance.create({ foo: 'bar' }); // adds to collection and saves the new model
Documentation for create
In order for this to work, you should set the model property of the
collection.

How to handle custom response in Backbone model

I started integrating backbone in my project. The very first difficulty that i had was response from backend was not JSON Array or not designed for backbone. Here is an example.
//A backbone model
var Person = Backbone.Model.extend({});
// A backbone collection
var PersonCollection = Backbone.Collection.extend({
model : Person,
url: '/people'
});
So consider this, that when I request /people it does not return JSON array of people. Instead it return something like:
{header: "some str", people: ["person", "array", ".."], stats: "something is here" }
The problem with it is backbone is unable to assign this JSON response to models. Is there any tweak that can be done in controller on response. So accessing model can be normal.
Any before/after hook.
FYI: backbone is getting response from server, I can see it under "responseText" key.
Any help is highly appreciated.

Backbone supports this. I ran into the same issue when consuming data from Parse.com. In your case, when you have a /people endpoint that does not return an array, you can override the Collection.parse function to show Backbone how to find the array it is looking for:
var PersonCollection = Backbone.Collection.extend({
model : Person,
url: '/people',
parse: function(resp, xhr) {
this.header = resp.header;
this.stats = resp.stats;
return resp.people;
}
});
If you need to do more in this function, then you should. In a similar way, you can override Model.sync if you need to.