如何在Backbone.js中获取视图中的模型属性？
如何在Backbone.js中获取视图中的模型属性？
提问于 2012-12-17 22:32:45
我正在尝试将模型作为参数传递到视图中。我正在获取视图中的对象，但无法访问其属性...代码如下：
在路由器上：
var Product = new ProductModel({id: id});
Product.fetch();
var product_view = new ProductView({el: $("#main-content"), model: Product});从模型中：
var ProductModel = Backbone.Model.extend({
urlRoot: 'http://192.168.1.200:8080/store/rest/product/'
});从视图中：
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);
});
}
});下面是“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在我看来，我所有的选项都是“未定义的”(名称，日期，...)
你知道我做错了什么吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-12-17 22:53:40
创建初始模型后，立即使用以下命令创建视图
var product_view = new ProductView({..., model: Product});在ProductView的initialize方法中，您调用了this.render()，它反过来从模型中读取并呈现值-这些值中的大多数都是undefined (因为服务器没有足够的时间传回模型的值)。
不要直接调用this.render()，而要绑定一个事件，例如：
// in ProductView::initialize
this.model.on('sync', function() {
this.render();
}, this);您可能还希望绑定change事件，以便对模型的本地(尚未同步)更改也反映在视图中。(主干活动的概述可在here上找到。)
Stack Overflow用户
发布于 2012-12-20 04:34:11
因为Product.fetch()是异步执行的，所以您需要在从服务器检索到数据后创建视图：
var Product = new ProductModel({id: id});
var product_view;
Product.fetch().done(function() {
product_view = new ProductView({el: $("#main-content"), model: Product});
});Stack Overflow用户
发布于 2012-12-17 22:53:22
Product.fetch()是一个异步调用，所以我猜测在初始化视图时获取还没有完成。您可能想要做的是使用fetch的success + error回调，以确保在呈现任何内容之前模型中包含数据
http://backbonejs.org/#Model-fetch
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13916095
复制相关文章
相似问题
腾讯云开发者
