如何在backbone.js中使用路由器切換視圖

我遇到了使用路由器切換視圖的問題。如何在backbone.js中使用路由器切換視圖

我的應用程序是用Backbone.js編寫的。它有2意見，ApplicationView和ApplicationSubView。

原來我以爲，如果發生點擊事件，然後通過路由器應該移動至頁面

例如，誰點擊了具有about類的元素，則必須先進經驗移動和重新渲染頁面

var app = app || {}; 
$(function() { 
    'use strict'; 
    var ApplicationView = Backbone.View.extend({ 
     //bind view to body element (all views should be bound to DOM elements) 
     el: $('body'), 
     //called on instantiation 
     initialize: function() { 
      //set dependency on ApplicationRouter 
      this.router = app.Router; 
      this.subView = new ApplicationSubView(); 
      //call to begin monitoring uri and route changes 
      Backbone.history.start(); 
     }, 
     showSpinner: function() { 
      console.log('show the spinner'); 
     }, 

     hideSpinner: function() { 
      console.log('hide the spinner'); 
     }, 
     loadSubView: function() { 
      this.showSpinner(); 
      var subView = new SubView(); 
      subView.on('render', this.hideSpinner); 
     } 
    }); 

    var ApplicationSubView = Backbone.View.extend({ 
     events: { 
      'click ul.pills li.home-pill a': 'displayHome', 
      'click ul.pills li.about-pill a': 'displayAbout', 
      'click ul.pills li.contact-pill a': 'displayContact' 
     }, 

     displayHome: function() { 
      this.trigger('render'); 
      console.log('a subView render'); 
      this.router.navigate("home", true); 
      return this; 
     }, 

     displayAbout: function() { 
      this.trigger('render'); 
      console.log('a subView render'); 
      this.router.navigate("about", true); 
      return this; 
     }, 

     displayContact: function() { 
      this.trigger('render'); 
      console.log('a subView render'); 
      this.router.navigate("contact", true); 
      return this; 
     } 
    }); 
    //load application 
    app.view = new ApplicationView(); 
});

來源

2016-12-10 Sean Sin

儘管我無法真正理解問題的描述，但我可以看到很多需要完成的改進，因此我對代碼進行了完整的重構。

路由只是處理的URL變化，所以你可以使用錨標籤直接，沒有明確的事件和navigate電話。

這就是你需要觸發路線的全部內容。

<body> 
    <ul class="pills"> 
     <li><a href="#/">Home</a></li> 
     <li><a href="#/about">About</a></li> 
     <li><a href="#/contact">Contact</a></li> 
    </ul> 
    <div id="content"></div> 
</body>

查看<div id="content"></div>？這是內容分區，這是其他頁面將去的地方。我們將使用「佈局」視圖來管理它：

var app = app || {}; 
(function() { 
    'use strict'; 
    var views = app.view = app.view || {}; 
    views.Application = Backbone.View.extend({ 
     initialize: function() { 
      // caching the jQuery object on init 
      this.$content = this.$('#content'); 
     }, 
     setContent: function(view) { 
      var content = this.content; 
      if (content) content.remove(); 
      content = this.content = view; 
      this.$content.html(content.render().el); 
     }, 
    }); 

    // make a view for each sub-page 
    views.Home = Backbone.View.extend({ /* ... */ }); 
    views.About = Backbone.View.extend({ /* ... */ }); 
    views.Contact = Backbone.View.extend({ /* ... */ }); 
})();

然後，您需要定義處理這些路由的路由器。

var app = app || {}; 
(function() { 
    'use strict'; 
    var views = app.view = app.view || {}; 

    app.Router = Backbone.Router.extend({ 
     routes: { 
      'about': 'aboutRoute', 
      'contact': 'contactRoute', 
      // put the catch-all last 
      '*home': 'homeRoute', 
     }, 
     initialize: function() { 
      // create the layout once here 
      this.layout = new views.Application({ 
       el: 'body', 
      }); 
     }, 
     homeRoute: function() { 
      var view = new views.Home(); 
      this.layout.setContent(view); 
     }, 
     aboutRoute: function() { 
      var view = new views.About(); 
      this.layout.setContent(view); 
     }, 
     contactRoute: function() { 
      var view = new views.Contact(); 
      this.layout.setContent(view); 
     } 
    }); 
})();

當文檔準備好使用它：

$(function() { 
    var router = new app.Router(); 
    Backbone.history.start(); 
});

來源

2016-12-11 01:35:52

太感謝你了！我不寫英文好..所以你很難理解我的問題，但是，你非常好心的回答我試試吧！ –

如何在backbone.js中使用路由器切換視圖

回答

相關問題