我的应用包含两个视图，包括模板，路由器，模型和集合。
root
js
collections
-collection.js
models
-model.js
routers
-router.js
templates
-add_item.html
-list.html
views
-add_item.js
-list.js
index.html
在router.js中，我试图导航到子视图。
define([
'jquery',
'backbone',
'views/item'
], function($, Backbone, ItemView) {
'use strict';
return Backbone.Router.extend({
routes: {
'': 'list',
'list/add': 'addItem',
'list/edit/:id': 'editItem'
},
addItem: function() {
new ItemView();
}
});
});
通过查看调用堆栈，我看到我的路由器触发了。但我孩子视图的模板并没有初始化。
item.js代码：
return Backbone.View.extend({
template: _.template(itemTemplate),
events: {
'click #save': 'saveItem',
'click #cancel': 'cancel'
},
initialize: function() {
this.render();
},
render: function() {
this.$el.html(this.template);
return this;
}
});
答案 0 :(得分：1)
_.template 下划线
_.template函数将模板字符串作为参数 （以及可选的设置对象）和返回新的预编译 模板函数，可以将对象作为参数。
template: _.template(itemTemplate), // this returns a function, which is fine here.
这一行很好，但是下面一行将返回的函数作为HTML内容：
this.$el.html(this.template); // a function reference as HTML?!
您需要调用预编译的模板函数来获取字符串：
this.$el.html(this.template());
现在，视图的默认根元素（el）已正确填充模板内容。
<div>The div element is the default root element, this text is the template</div>
但是，一旦呈现模板，视图的元素在页面中仍然不。要使其成为页面的一部分，您可以：
手动将视图el放入路由器中的另一个元素
addItem: function() {
var view = new ItemView();
$("#content").html(view.render().el);
}
我将view.render()放在此处，因为initialize中的呈现不是我首选的模式，因为它限制了视图的重用。但这实际上取决于对视图的看法。
将selector string或元素传递给视图的el构造函数选项
new ItemView({ el: '#the-view-element-id' });
使用硬编码的el属性创建视图（可以通过上面的el选项覆盖）
Backbone.View.extend({
el: '#the-view-element-id',
/* ... */
如果您想默认使用list路线，可以像这样制作routes对象：
routes: {
'list/add': 'addItem',
'list/edit/:id': 'editItem'
// catch-all (default) route at the end
'*anything': 'list',
},
其他信息：