CODEWITHSUNDEEP
javascriptajaxrestbackbone.js
n0minal
n0minal

Reputation: 3223

Get attributes of model in backbone.js

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. enter image description here

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.

Upvotes: 7

Views: 19187

Answers (2)

jlb
jlb

Reputation: 19970

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);

Upvotes: 11

chiborg
chiborg

Reputation: 28074

This is due to the model loading asynchonously - item.get("ItemCode") will only work after the model has been loaded with fetch. Try calling it in your onSuccess function.

Additionally, note that it won't help to initialize Item directly. What you are trying to do is get an element in the collection Items and then call item.get("ItemCode") on that element, like this:

function onSuccess() {
   alert('success')
   var item = items.get(13); // get item with id 13
   alert(item.get("ItemCode"));
}

Upvotes: 2

Related Questions