[英]The backbone router isn't working properly
我正在構建一個簡單的骨干應用程序,它有4條路線:家庭,關於,隱私和條款。 但設置路線后我有3個問題:
“條款”視圖不呈現;
當我刷新#about或#privacy頁面時,主視圖在#about / #vacile視圖之后呈現
當我點擊后退按鈕時,主視圖永遠不會呈現。 例如,如果我在#about頁面中,並且我點擊主頁的后退按鈕,那么about視圖將保留在頁面中
我不知道第一個問題我做錯了什么。 我認為第2和第3個問題與家用路由器中缺少的東西有關,但我不知道是什么。
這是我的代碼:
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();
我錯過了什么,但我不知道是什么。
謝謝
我認為您需要將腳本模板從.feed html元素中移出,當您呈現HomeListView視圖時,它將刪除其內部的所有內容,然后腳本模板將對您調用的其他視圖不可用於HomeListView 。
<section class="feed">
</section>
<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>
你也在missView的渲染函數中缺少一個冒號
render: function () {
this.$el.html(this.template());
return this;
}
除了Rayweb_on建議的所有內容之外,從AboutView
, PrivacyView
和TermsView
的initialize
方法中刪除對render
的調用,並在你的路由函數中,替換$('.feed').html(this.aboutView.el);
等等,用$('.feed').html(this.aboutView.render().el);
等
此外,在路由器中定義一個名為currentView
的變量或類似的變量,並將其設置為路由功能選擇的任何視圖。 在每個路由函數中,檢查它是否已設置,如果已設置,則在渲染新視圖之前調用remove()
。 這些更改應使先前渲染的視圖不會踩到新視圖,並確保新渲染的視圖是最新的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.