【发布时间】：2013-06-28 20:31:53
【问题描述】：
我正在构建一个简单的主干应用程序，它有 4 条路线：主页、关于、隐私和条款。但是设置路线后我有两个问题：
当我刷新#about 或#privacy 页面时，主视图呈现在#about/#privacy 视图之后
当我点击返回按钮时，主页视图永远不会呈现。例如，如果我在#about 页面中，并且我点击返回按钮返回主页，about 视图将停留在页面中
我认为这两个问题与家庭路由器中缺少的东西有关，但我不知道是什么。
这里是 jsfiddle：http://jsfiddle.net/swayziak/Mm8Mt/
现在是代码：
这是我的代码：
HTML
<section class="feed">
<script id="homeTemplate" type="text/template">
<div class="home">
</div>
</script>
<script id="termsTemplate" type="text/template">
<div class="terms">
Bla bla bla bla
</div>
</script>
<script id="privacyTemplate" type="text/template">
<div class="privacy">
Bla bla bla bla
</div>
</script>
<script id="aboutTemplate" type="text/template">
<div class="about">
Bla bla bla bla
</div>
</script>
</section>
观点
app.HomeListView = Backbone.View.extend({
el: '.feed',
initialize: function ( initialbooks ) {
this.collection = new app.BookList (initialbooks);
this.render();
},
render: function() {
this.collection.each(function( item ){
this.renderHome( item );
}, this);
},
renderHome: function ( item ) {
var bookview = new app.BookView ({
model: item
})
this.$el.append( bookview.render().el );
} });
app.BookView = Backbone.View.extend ({
tagName: 'div',
className: 'home',
template: _.template( $( '#homeTemplate' ).html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
app.AboutView = Backbone.View.extend({
tagName: 'div',
className: 'about',
initialize:function () {
this.render();
},
template: _.template( $( '#aboutTemplate' ).html()),
render: function () {
this.$el.html(this.template());
return this;
}
});
app.PrivacyView = Backbone.View.extend ({
tagName: 'div',
className: 'privacy',
initialize: function() {
this.render();
},
template: _.template( $('#privacyTemplate').html() ),
render: function () {
this.$el.html(this.template());
return this;
}
});
app.TermsView = Backbone.View.extend ({
tagName: 'div',
className: 'terms',
initialize: function () {
this.render();
},
template: _.template ( $( '#termsTemplate' ).html() ),
render: function () {
this.$el.html(this.template());
return this;
}
});
还有路由器：
var AppRouter = Backbone.Router.extend({
routes: {
'' : 'home',
'about' : 'about',
'privacy' : 'privacy',
'terms' : 'terms'
},
home: function () {
if (!this.homeListView) {
this.homeListView = new app.HomeListView();
};
},
about: function () {
if (!this.aboutView) {
this.aboutView = new app.AboutView();
};
$('.feed').html(this.aboutView.el);
},
privacy: function () {
if (!this.privacyView) {
this.privacyView = new app.PrivacyView();
};
$('.feed').html(this.privacyView.el);
},
terms: function () {
if (!this.termsView) {
this.termsView = new app.TermsView();
};
$('.feed').html(this.termsView.el);
}
})
app.Router = new AppRouter();
Backbone.history.start();
谢谢。
【问题讨论】：
标签： javascript backbone.js frontend backbone-views backbone-routing