php - JavaScript: Backbone.js populate collection of models - Stack Overflow

admin管理员组

文章数量:1312852

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 ments in the code for some more precise questions, but the main question is why doesn't the collection populate with the obviously received data?

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 ments in the code for some more precise questions, but the main question is why doesn't the collection populate with the obviously received data?

• php
• javascript
• json
• collections
• propel

Share Improve this question Follow edited Feb 9, 2012 at 20:53 Brian asked Feb 9, 2012 at 20:37 BrianBrian 13.5k1313 gold badges6161 silver badges101101 bronze badges 6

• 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 Commented Feb 9, 2012 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. – Brian Commented Feb 9, 2012 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 Commented Feb 9, 2012 at 20:50
• Exactly. When the line this.list.fetch() executes, the parse method is called after pletion 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. – Brian Commented Feb 9, 2012 at 20:51
• json is not valid. Delete the last ",". – czerasz Commented Feb 9, 2012 at 20:52

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 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;
}

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

The mon 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.

本文标签： phpJavaScript Backbonejs populate collection of modelsStack Overflow