CODEWITHSUNDEEP
backbone.js
Akshat Goel
Akshat Goel

Reputation: 528

Can't access attributes model backbone js

I am creating my "Hello world" app in backbone js. I am stuck at the very basic.

var gs = { documentRoot: "" }; // create namespace for our app

gs.Test = Backbone.Model.extend({
    url: gs.documentRoot+'/test.php',
    initialize: function(){
        this.fetch();
    }
});

gs.TestView = Backbone.View.extend({
    render: function(){
                    console.log(this.model);
        console.log(this.model.get('testId'));
    }
});

var testM = new gs.Test();

var test = new gs.TestView({model: testM});
test.render();

Here when I log model in the console, it shows fetched attributes from the server but I can't access those attributes from test.get('attribute'). I tried logging test.attributes, it gives empty object but when I log test, it shows those attributes in attributes object.

Upvotes: 0

Views: 1725

Answers (3)

Akshat Goel
Akshat Goel

Reputation: 528

For those who are stuck with the same problem, here is the solution from the library itself.

Use model's in-built 'sync' event to get the model attributes after fetch()/save() calls.

testM.on('sync',function(){
   test.render();
});

Upvotes: 1

Vitalii Petrychuk
Vitalii Petrychuk

Reputation: 14225

fetch is async method, so you have to wait some time. The best solution in this case is promises:

test.fetch().done(function() {
  console.log(test);
});

Your updated model:

initialize: function() {
  // save link to promise
  this.deferred = this.fetch();
}

And your render function:

render: function() {
  // use promise to render view after model will be fetched
  // use `bind` to save context of this view
  this.model.deferred.done(_.bind(function () {
    // model is fetched
    // all operations goes here
    console.log(this.model.get('testId')); // <- proper value
  }, this));
  console.log(this.model.get('testId')); // <- undefined
}

More about ajax you can read here http://api.jquery.com/jQuery.ajax

var TestModel = Backbone.Model.extend({
  url : '/test.php'
});

var test = new TestModel();

// `context` context to be passed to any callback function
test.fetch({context:test}).done(function () {
  // `this` is equals to `test` (`context` option)

  // In case if you want to get all model data:
  // the best way to get model data for read-only mode.
  // this metod return a copy of the model's attributes
  console.log(this.toJSON());
  // you can also use `this.attributes` but this is not recommended
  console.log(this.attributes());      

  // In case if you want to get some model data:
  console.log(this.get('some_attribute'));   
  // If you want to get `c` from this model ({a:{b:{c:1}}}):
  console.log(this.get('a').b.c);    
});

Upvotes: 1

Venkat Kotra
Venkat Kotra

Reputation: 10743

model#fetch method has a success and error callback options that can be passed to fetch. The success callback gets called when the response from the server has come.

Right way to test the fetched attributes of a model is 

test.fetch({
    success: function(model){
        // model here and test are same
        console.log(model);
        console.log(test.toJSON());
        // access your attribute with name `attributeName`
        console.log(test.get('attributeName'));
    }
});

Upvotes: 2

Related Questions