JavaScript: Backbone.js populate collection of models

Question

Here is what I have so far:

var Item = Backbone.Model.extend({
    defaults: {
        id: 0,
        pid: 0,
        t: null,
        c: null
    },
    idAttribute: 'RootNode_', // what should this be ???
    url: 'page.php'
});

var ItemList = Backbone.Collection.extend({
    model: Item,
    url: 'page.php',
    parse: function(data) {
        alert(JSON.stringify(data)); // returns a list of json objects, but does nothing with them ???
    }
});

var ItemView = Backbone.View.extend({
    initialize: function() {
        this.list = new ItemList();
        this.list.bind('all', this.render, this);
        this.list.fetch();
    },
    render: function() {
        // access this.list ???
    }
});

var view = new ItemView();

Current (expected) json response:

{
    "RootElem_0":{"Id":1,"Pid":1,"T":"Test","C":"Blue"},
    "RootElem_1":{"Id":2,"Pid":1,"T":"Test","C":"Red"},
    "RootElem_2":{"Id":3,"Pid":1,"T":"Test2","C":"Money"}
}

This successfully polls page.php and the backend acts on $_SERVER['REQUEST_METHOD'] and returns the required information, however I don't know why the collection is not filled.

In the parse function of ItemList it properly shows me all the output, but it does nothing with it.

I left some comments in the code for some more precise questions, but the main question is why doesn't the collection populate with the obviously received data?

have you created a new ItemList in code you're not showing? you also want to set the model for your view so it's actually hooked up to your ItemList — kinakuta, Feb 09 '12 at 20:40
I create and fetch an instance of `ItemList` inside `ItemView`'s `initialize` function. As for a model in the view, that isn't required to get this working. — Nahydrin, Feb 09 '12 at 20:42
ah, I didn't see you were instantiating the model in the view itself - so your ajax call is returning a response but nothing is in your collection? — kinakuta, Feb 09 '12 at 20:50
Exactly. When the line `this.list.fetch()` executes, the `parse` method is called after completion of the ajax call and the `data` parameter has a valid json object. However, the collection is not populated with the response it has received. — Nahydrin, Feb 09 '12 at 20:51

driangle · Accepted Answer · 2012-07-23T17:50:45.267

8

Modify your parse method to:

parse: function(response){
   var parsed = [];
   for(var key in response){
      parsed.push(response[key]);
   }
   return parsed;
}

To follow conventions, change list inside ItemView to model. Also in render():

render: function() {
    var template = _.template("<div>some template</div>");
    this.model.each(function(item){ 
        this.$el.append(template(item.toJSON()));
    }, this);
    return this;
}

edited Jul 23 '12 at 17:50

answered Feb 09 '12 at 20:57

driangle

11,601
5
47
54

I have been at this all day and you come out of nowhere with the elegant solution I have been looking for. You sir, are my saviour. THANK YOU! – Nahydrin Feb 09 '12 at 21:11
could you give me an example of what `template` would look like, given the 4 default fields I have in my OP? I would be very grateful. :) – Nahydrin Feb 09 '12 at 21:14
`
<%= Id %><%= Pid %><%= T %><%= C %>` check out the [docs](http://documentcloud.github.com/underscore/#template)
– driangle Feb 09 '12 at 21:23

score 1 · Answer 2 · answered Feb 09 '12 at 21:01

The parse method you're supposed to be returning the data after doing whatever necessary parsing is required for it.

The common use case for parse would be if you're sending back an object of a form like:

{ "id" : "NaN", "tasks": [ *all your models in a list here *] }

then you'd use parse like so:

parse: function (data) {
    return data.tasks
}

Backbone then handles the rest.

Is there a particular reason why you're sending the data back in that dictionary format? It's not exactly clear how you intend to map that to each model of the collection. Is the key irrelevant? if so, you should be passing back a list of the objects in the values.(Although see note at bottom). If not, and you want to attach it to the models, it should be moved to the object you're using as a value and send back a list.

* Note: Don't actually send back a JSON list bare. There is an exploit for GET requests that relies on lists being valid javascript on their own, where a malicious site can use the Array object and override it to use a script tag to your API to use the users credentials to pull down whatever information is available in that call. Instead, when wanting to send back a list you should use something like this:

{ result: [*list here*] }

Then you just use the parse method above to extract the list.

JavaScript: Backbone.js populate collection of models

2 Answers2