Get attributes of model in backbone.js

Question

I have this model

var Item = Backbone.Model.extend({
   url: 'http://localhost/InterprisePOS/Product/loaditembycategory/Event Materials'
});

var onSuccess = function(){ alert("success"); };

And a collection

var Items = Backbone.Collection.extend({
    model: Item
});

And the rest of my code is here:

var item = new Item();
var items = new Items();
item.fetch({ success: onSuccess });
alert(items.get("ItemCode"));

What I want is to simply get the attributes of the model. Now I have this on firebug. Also when I run it on the browser I get the alert success and the next alert is undefined.

This is the output:

{"ErrorMessage":null,"Items":[{"ErrorMessage":null,"CategoryCode":"Event Materials","ClassCode":null,"Components":null,"GroupCode":null,"ImageURL":null,"ItemCode":"ITEM-123","ItemDescription":"Old World Lamppost\u000d\u000a\u000d\u000a","ItemName":"GET123","ItemType":null,"KitItem":null,"Matrix":null,"Prefix":null,"RetailPrice":107.990000,"SalesTaxCode":null,"UPCCode":null,"UnitMeasureCode":"EACH","UnitsInStock":0,"Value":null,"WholesalePrice":95.000000}]}

NOTE

That is just one of the items it returns. I just posted on item so that it won't be that long.

Answer 1

You are calling get on your collection ( see http://documentcloud.github.com/backbone/#Collection-get)

It seems what you really want is to iterate over the collection, and call get on each item

items.each(function(item) {
  item.get('ItemCode');
});

If not, please elaborate!

Additionally, if your model url responds with a list of models, you should be defining the url attribute in your Collection instead of your model.

var Items = Backbone.Collection.extend({
    model: Item,
    url: 'http://localhost/InterprisePOS/Product/loaditembycategory/Event Materials'
});

And your response should be an array, with Items as array elements [<item1>, <item2>, ...], rather than a JSON object with {'Items': [<item1>, <item2>, ...] }. If you don't want to modify the response, you will have to implement the parse function on your collection ( http://documentcloud.github.com/backbone/#Collection-parse ).

Also, as @chiborg mentions, you are calling get right after fetch (which will complete asynchronously), so there is no guarantee that your data will be available.

The proper solution here is to bind a 'refresh' listener on the collection.

items.on('refresh', function() {
  // now you have access to the updated collection
}, items);