Javascript 刷新视图和使用“后退”按钮时出现问题

我正在构建一个简单的主干应用程序，它有4条路径：家、关于、隐私和条款。但在设置路线后，我有两个问题：

• 刷新#关于或#隐私页面时，主视图在#关于/#隐私视图之后呈现

• 当我按下“后退”按钮时，主视图从不渲染。例如，如果我在#about页面中，我点击了主页的后退按钮，about视图将保留在页面中

我认为这两个问题与家庭路由器中缺少的东西有关，但我不知道是什么

以下是JSFIDLE：

现在是代码：

这是我的密码：

HTML

和路由器：

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(); 

---

谢谢。

问题在于，每次导航到另一条路线时，都会替换HomeView的HTML。此外，在后续调用中，也不会在路由器的home（）方法中呈现HomeView

---

如果只想渲染视图一次，则需要在初始渲染后手动隐藏/显示视图，而不仅仅是替换HomeView的HTML。

谢谢您的回答。我怎样才能做到你所建议的一切？我认为你应该能够将

el:'.feed'

放入每个视图中，然后在你想在router方法中显示的视图上调用render方法。如果视图存在：渲染视图；else:创建视图的新实例。我忘了在代码末尾说我有这个测试应用程序的代码：可能代码的某些部分与我的问题有关

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();