Backbone.js fetch not actually setting attributes

Question

I have a basic backbone model, its urlRoot attribute is set and the corresponding target on the server side returns a correct JSON output (both JSON string and

Answer 1

Just as a quick remark when using events in this example. It did not work with change in my case because this events fire on every change. So sync does the trick.

var athlete = new Athlete({id: 1});
athlete.on("sync", function (model) {
   console.log(model.get('name'));
});
athlete.fetch();

Answer 2

fetch is asynchronous, which means that the data won't be available if you immediatly call console.log(athlete.get('name')) after the fetch.

Use events to be notified when the data is available, for example

var athlete = new Athlete({id: 1});
athlete.on("change", function (model) {
     console.log(model.get('name'));
});
athlete.fetch();

or add a callback to your fetch

var athlete = new Athlete({ id: 1 });
athlete.fetch({
    success: function (model) {
        console.log(model.get('name'));
    }
});

or take advantage of the promise returned by fetch:

athlete.fetch().then(function () {
    console.log(athlete.get('name'));
});