javascript - Printing Backbone.js collection through console.log(), what's wrong with this? - Stack Overflow

admin管理员组

文章数量:1353331

OK. I'm starting out on Backbone.js, and trying to do some very simple things. Here's a very simple Model and Collection.

// my model
Friend = Backbone.Model.extend({});

// my collection
Friends = Backbone.Collection.extend({});

// instantiate friends and add some friends objects!
var friends = new Friends();
friends.add([
  {name: "James"},
  {name: "Michael"}
]);

console.log(friends.length) // prints out 2! which is correct!

Above example is fine. But now I want to initialize my collection from server, which returns the exact same JSON object.

// my model
Friend = Backbone.Model.extend({});

// my collection
Friends = Backbone.Collection.extend({
  url: 'http://localhost/myapp/get_users'
});

// instantiate friends and add some friends objects!
var friends = new Friends();
friends.fetch();

console.log(friends.length) // prints out 0! WHY???

I've been looking at my Chrome inspection panel for both of them and regardless, I have no idea why one from the server is not working?

FYI, on the server side, I have CodeIgniter 2.02, using Phil Stuegeon's REST API to return a JSON data.

I've also tried a simple function on my PHP side, like

function get_users() {
  echo '{name:"James"}, {name:"Michael"}';
}

But without any success.

What am I doing wrong here?

OK. I'm starting out on Backbone.js, and trying to do some very simple things. Here's a very simple Model and Collection.

// my model
Friend = Backbone.Model.extend({});

// my collection
Friends = Backbone.Collection.extend({});

// instantiate friends and add some friends objects!
var friends = new Friends();
friends.add([
  {name: "James"},
  {name: "Michael"}
]);

console.log(friends.length) // prints out 2! which is correct!

Above example is fine. But now I want to initialize my collection from server, which returns the exact same JSON object.

// my model
Friend = Backbone.Model.extend({});

// my collection
Friends = Backbone.Collection.extend({
  url: 'http://localhost/myapp/get_users'
});

// instantiate friends and add some friends objects!
var friends = new Friends();
friends.fetch();

console.log(friends.length) // prints out 0! WHY???

I've been looking at my Chrome inspection panel for both of them and regardless, I have no idea why one from the server is not working?

FYI, on the server side, I have CodeIgniter 2.02, using Phil Stuegeon's REST API to return a JSON data.

I've also tried a simple function on my PHP side, like

function get_users() {
  echo '{name:"James"}, {name:"Michael"}';
}

But without any success.

What am I doing wrong here?

• javascript
• backbone.js

Share Improve this question Follow asked Aug 13, 2011 at 14:16 ericbaeericbae 9,6442626 gold badges7777 silver badges109109 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Have you forgot the [] to make it an array?

 echo '[{name:"James"}, {name:"Michael"}]';

Also you check the length in the onsuccess method you can pass to fetch. At the moment you check the length directly after fetching, so your not sure if the result is still loaded.

friends.fetch(
   {success:function(){
       console.log(friends.length)
   }}
);

fetch() is an asynchronous call, so you'll be printing to the console before the fetch() has returned to populate your collection

To verify, put a breakpoint on the console.log(friends.length) line. The breakpoint will give the fetch() time to happen

I think the JSON you're passing to .add() is invalid. You've got:

[
  {name: "James"},
  {name: "Michael"}
]

But you need to quote the keys too:

[
  {"name": "James"},
  {"name": "Michael"}
]

本文标签：