How to get model attributes in a view in Backbone.js?

Question

I am trying to pass a model as a parameter in a view. I get my object in the view, but I can’t access its attributes ... Here is the code:

From the router:

var Product = new ProductModel({id: id}); Product.fetch(); var product_view = new ProductView({el: $("#main-content"), model: Product}); 

From the model:

 var ProductModel = Backbone.Model.extend({ urlRoot: 'http://192.168.1.200:8080/store/rest/product/' }); 

From point of view:

 ProductView = Backbone.View.extend({ initialize: function(){ console.log(this.model); this.render(); }, render: function(){ var options = { id: this.model.id, name: this.model.get('name'), publication_start_date: this.model.get('publication_start_date'), publication_end_date: this.model.get('publication_end_date'), description: this.model.get('description'), applis_more: this.model.get('applis_more') } var element = this.$el; var that = this; $.get('templates/product.html', function(data){ var template = _.template(data, options); element.html(template); }); } }); 

Here is the result of "console.log":

 child {attributes: Object, _escapedAttributes: Object, cid: "c1", changed: Object, _silent: Object…} Competences: child Editor: child Hobbies: child Opinions: child _changing: false _escapedAttributes: Object _pending: Object _previousAttributes: Object _silent: Object attributes: Object createdDate: null deletedDate: null descriptionId: 0 galleryImage: null id: 13 image: null manufacturerId: 0 name: "sdf" owner: 0 status: 0 thumbnail: null titleId: 0 type: 1 uid: "fdsf" updatedDate: null __proto__: Object changed: Object cid: "c1" id: 13 __proto__: ctor 

In my opinion, all my options are: "undefined" (name, dates, ...)

Any idea what I'm doing wrong?

Answer 1

After creating the original model, you immediately create a view using

 var product_view = new ProductView({..., model: Product}); 

In the initialize ProductView method ProductView you call this.render() , which, in turn, reads and displays the values ​​from the model — most of these values ​​are undefined (because the server did not have enough time to return the values ​​of the model).
Do not call this.render() directly, but bind an event, for example:

 // in ProductView::initialize this.model.on('sync', function() { this.render(); }, this); 

You can also bind the change event so that local (rather than synchronized) changes in the model are also reflected in the view. (An overview of key events can be found here .)

Answer 2

Since Product.fetch () runs asynchronously, you need to create a view as soon as the data is received from the server:

 var Product = new ProductModel({id: id}); var product_view; Product.fetch().done(function() { product_view = new ProductView({el: $("#main-content"), model: Product}); }); 

Answer 3

Product.fetch () is an asynchronous call, so I assume that the selection has not finished yet when you initialize the view. What you probably want to do is use fetch success + error callbacks to ensure that the model has data before doing anything

http://backbonejs.org/#Model-fetch