刷新視圖和使用後退按鈕時出現問題

Question

我正在構建一個簡單的骨幹應用程序，它有4條路線：家庭，關於，隱私和條款。但是，設置路由後，我有2個問題：

• 當我刷新#about或#privacy頁面，主頁視圖呈現約/＃隱私鑑於＃

• 當我打了之後主視圖後退按鈕不會呈現。例如，如果我在#about頁，我打後退按鈕的網頁，有關視圖停留在頁面

我認爲，這兩個problema與在缺少點什麼有關家庭路由器，但我不知道是什麼。

這裏是的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(); 

謝謝。

Answer 1

的問題是，您要更換你每次瀏覽到另一條路線時HomeView的HTML。此外，您在隨後的調用中不會在路由器的home（）方法中呈現HomeView。

如果您只想渲染視圖一次，然後你需要隱藏/顯示初始後手動呈現，而不僅僅是更換HomeView的HTML的意見。