Backbone js and populating a model with data using fetch()

Question

I'm working in Backbone js and I am trying to populate a model with data using fetch. The problem is that the fetch appears to be working but my model is not populating with data. A snippet of the code: ``` Backbone.emulateHTTP = true; Backbone.emulateJSON = true; ComponentsModel = Backbone.Model.extend({ initialize : function() { }, defaults : { component_id : null }, urlRoot : "/components/ajax_component", }); ComponentsView = Backbone.View.extend({ el : $('body'), events : { 'change #component-selector' : 'changeComponent', }, initialize : function() { _.bindAll(this, 'render', 'changeComponent'); this.render(); }, changeComponent : function(e) { var clickedEl = $(e.currentTarget); var value = clickedEl.attr("value"); var component = new ComponentsModel({id :value, component_id :value }); component.fetch(); component.toJSON(); alert(component.get('component_name')); }, render : function() { }, }); ``` And the JSON being return from the server looks like this: ``` {"component_id":"1…

Accepted Answer

Fetch is async, that's why it has `success` and `error` callbacks. So it's no sure that the data are fetched by the time you try to get the property. Try this:

```
component.fetch({
   success: function(){
       // Now you got your data
   }});
```

Backbone js and populating a model with data using fetch()

Solution

Problem