ホーム、アバウト、プライバシー、用語の 4 つのルートを持つシンプルなバックボーン アプリを構築しています。しかし、ルートを設定した後、3 つの問題があります。
「用語」ビューが表示されません。
#about または #privacy ページを更新すると、ホーム ビューは #about/#privacy ビューの後にレンダリングされます
戻るボタンを押すと、ホーム ビューがレンダリングされません。たとえば、#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();
私は何かが欠けていますが、何がわかりません。
ありがとう