【发布时间】：2012-07-31 12:00:14
【问题描述】：
问题在于，当从模板访问时，除了“名称”之外的所有对象属性都会在控制台中调用错误“id/url/whatever is not defined”。只有“名称”的模板显示正常并显示正确的名称，但只要我调用不同的属性，例如。 id 或 url，它坏了。传递给视图的对象是一个已解析的静态 JSON 文件，其中所有项目都位于同一级别，并且可以从控制台访问，例如collectionName.models[0].get('id');
让我感到困惑的是 name 属性有效，就好像它是在骨干/下划线代码中的某个地方预定义为默认值一样。
我是否遗漏了一些非常明显的东西？ 由于我可以从控制台访问模型数据，我认为视图本身处理数据的方式有问题，但我尝试用几种不同的方式重写它，似乎没有任何区别。
所有相关代码。
传递的对象格式。
这也是collectionName.models[0].attributes; 在控制台中返回的内容。
[{
"id":"0",
"name": "Building1",
"url": "building_1",
"floors":[{
"id":"0",
"name":"Ground Floor",
"image":"",
"rooms":[{
"id": "r_1",
"name": "Room 1",
},
{
"id": "r_2",
"name": "Room 2"
}]
}
}]
}
示例模板代码：
<span class="name"><%= name %></span>
<%= id %> <%= url %>
路由器代码：
routes: {
'': 'intro', // this route is using pretty much identical code and works fine, the model has the exact same format, the only difference is that all attributes work.
':id': 'firstLevel'
},
firstLevel: function (id) {
window.singleBuilding = new ThisBuilding({}, {idBuilding: id});
window.singleBuilding.fetch();
this.floorView = new FloorList({
collection: window.singleBuilding
});
var $intro = $('#intro');
$intro.empty();
$intro.append(this.floorView.render().el);
}
观看次数：
window.FloorSingleList = Backbone.View.extend({
className: 'floor-list',
initialize: function () {
this.template = _.template(tpl.get('floors-list-item'));
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.testModel = this.model.attributes; // I tried passing the attributes directly to the templatewithout .toJSON(), which worked exactly the same, as in only the 'name' attribute worked
},
render: function () {
console.log("The test data is:", this.testModel);
console.log("The actual model data is:", this.model);
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
window.FloorList = Backbone.View.extend({
tagName: 'section',
className: 'intro-list',
initialize: function () {
this.template = _.template(tpl.get('intro-list'));
_.bindAll(this, 'render');
this.collection.bind('reset', this.render, this);
this.collection.bind('change', this.render, this);
},
render: function (eventName) {
var $introList;
var collection = this.collection;
$(this.el).html(this.template({ }));
$introList = this.$('.intro-list');
collection.each(function (building) {
var view = new FloorSingleList({
model: building,
collection: collection
});
$introList.append(view.render().el);
});
return this;
}
});
型号代码：
window.ThisBuilding = Backbone.Collection.extend({
model : Building,
initialize: function(models, options) {
// Initialising the argument passed on from the router.
this.idBuilding = options.idBuilding;
return this;
},
url : function(){
return "data.json"
},
parse: function (response) {
console.log("Passed parameters are :", this.idBuilding); // Returns the request parameters passed from the router.
return response[this.idBuilding];
}
});
模板和引导
// templates are loaded during the bootstrap
tpl.loadTemplates(['header', 'intro-list', 'floors-list-item', 'building-list-item'], function() {
window.App = new ExampleApp();
Backbone.history.start();
});
【问题讨论】：
标签： javascript backbone.js backbone-views backbone-routing