我正在构建一个简单的主干应用程序,它有 4 条路线:主页、关于、隐私和条款。但是设置路线后我遇到了 3 个问题:
“条款” View 未呈现;
当我刷新#about 或#privacy 页面时,主页 View 在#about/#privacy View 之后呈现
当我按下后退按钮时,主视图从不呈现。例如,如果我在 #about 页面中,然后点击返回主页的按钮,about View 将保留在该页面中
我不知道我在第一个问题上做错了什么。我认为第二个和第三个问题与家庭路由器中缺少的东西有关,但我不知道是什么。
这是我的代码:
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 View 时,它将删除其 el 中的所有内容,然后脚本模板将对您调用的其他 View 不可用的 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>
此外,您还缺少 termsView 的渲染函数中的冒号
render: function () {
this.$el.html(this.template());
return this;
}
关于javascript - 主干路由器工作不正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17308398/