我正在尝试使用Derick Bailey在此article中的建议来管理主干中的页面过渡，但是about路由未呈现。它仅使用app.BookListView呈现原始路线，并且当我单击以访问About路线时，它将保留app.BookListView。
这是我的代码：
的HTML
<section class="feed">
</section>
<script id="bookTemplate" type="text/template">
<div class="book">
</div>
</script>
<script id="aboutTemplate" type="text/template">
<div class="about">
Bla bla bla bla
</div>
</script>
观点
Backbone.View.prototype.close = function(){
this.remove();
this.unbind();
};
function AppView(){
this.showView(view) {
if (this.currentView){
this.currentView.close();
}
this.currentView = view;
this.currentView.render();
$('.feed').html(this.currentView.el);
}
};
app.BookView = Backbone.View.extend ({
tagName: 'div',
className: 'book',
template: _.template( $( '#bookTemplate' ).html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
)};
app.BookListView = Backbone.View.extend({
el: '.feed',
initialize: function ( initialBooks ) {
this.collection = new app.BookList (initialBooks);
this.render();
},
render: function() {
this.collection.each(function( item ){
this.renderBook( item );
}, this);
},
renderBook: function ( item ) {
var bookview = new app.BookView ({
model: item
})
this.$el.append( bookview.render().el );
}
});
app.AboutView = Backbone.View.extend({
tagName: 'div',
className: 'about',
template: _.template( $( '#aboutTemplate' ).html()),
render: function () {
this.$el.html(this.template());
return this;
}
});
路由器
var AppRouter = Backbone.Router.extend({
routes: {
'' : 'home',
'about' : 'about'
},
initialize: function(options){
this.AppView = options.AppView;
},
home: function () {
var homeView = new app.BookListView();
this.AppView.showView(homeView);
},
about: function () {
var aboutView = new app.AboutView();
this.AppView.showView(aboutView);
}
});
app.Router = new AppRouter();
Backbone.history.start();
和一些数据来测试BookView：
$(function(){
var books = [
{title:'Imperial Bedrooms'},
{title:'Less than Zero'},
];
new app.BookListView (books);
JSFiddle：http://jsfiddle.net/swayziak/xdRRE/
控制台抛出以下错误：
未捕获到的SyntaxError：意外令牌{，在“ this.showView（view）{”中
未捕获的TypeError：无法读取“ this.AppView = options.AppView”中未定义的属性“ AppView”
谢谢。
最佳答案
您有语法错误，....错位或缺少字符，未定义的对象。
new app.BookListView (books);
var bookListView = new app.BookListView (books);
以下将不起作用：
this.showView(view) {
if (this.currentView){…
我想你想要这个吗？
this.showView = function(view){…}
以下行也会引发错误：
app.BookView = Backbone.View.extend ({…)};
它应该是：
app.BookView = Backbone.View.extend ({…});
为了下一行工作：
this.AppView.showView(homeView);
您必须在初始化时通过
appview：app.Router = new AppRouter(appView);
我会尝试清理您的小提琴，您使用的是哪种代码编辑器？因为所有错误都与语法有关。
更新
这是一个fiddle
您的家乡路线的问题是在这条线上：
home: function () {
if(!this.bookListView){
this.bookListView = new app.BookListView();
}
},
应该是：
home: function () {
if(!this.bookListView){
this.bookListView = new app.BookListView(books);
}else{
this.bookListView.render();
}
},