JavaScript: Backbone.js populates a collection of models

Question

Here is what I still have:

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 checks page.php , and the backend acts on $_SERVER['REQUEST_METHOD'] and returns the requested information, however I do not know why the collection is not full.

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

I left some comments in the code for more precise questions, but the main question is: why is the collection not filled with explicitly received data ?

Answer 1

Change the parse method:

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

To comply, change the list inside the 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; } 

Answer 2

A parsing method by which you must return data after performing any necessary analysis.

A common use case for parsing would be that you send back a form object, for example:

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

then you will use this syntax:

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

Then the return line processes the rest.

Is there any special reason why you are sending data in this dictionary? It is not entirely clear how you intend to correlate this with each model in the collection. Is the main irrelevant? If so, you should pass a list of objects in the values. (Although see note below). If not, and you want to attach it to the models, you should transfer it to the object that you use as the value, and send the list back.

* Note. Do not actually send a JSON list to the screen. There is an exploit for GET requests that rely on lists that are valid javascript per se, when a malicious site can use an Array object and override it to use a script tag for your API to use user credentials to pull out any information available in this challenge. Instead, when you want to send a list, you should use something like this:

 { result: [*list here*] } 

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