動態更改URL中的骨幹

Question

我試圖動態更改路由器內部鏈接，但無法管理做到這一點，它一直返回到基地集合URL。在這裏，我發佈了3個不同的集合的代碼，除了指向三個不同的網站，他們完全一樣。 我只有一個model和三個collections依賴於這種模式，他們甚至呈現了同樣的觀點。我如何可以動態改變url，所以我只能創建一個Collection和一個Model？這是最好的例子嗎？

// MODELS & COLLECTIONS 
    window.Post = Backbone.Model.extend({ 
      urlRoot: function() { 
        return 'http://localhost:5000/json/guides/:id' 
      } 
    }) 

    App.Collections.RecentPosts = Backbone.Collection.extend({ 
      model: Post, 
      url:'http://localhost:5000/json/posts/recent', 
    }) 
    App.Collections.PopularPosts = Backbone.Collection.extend({ 
      model: Post, 
      url:'http://localhost:5000/json/posts/popular', 
    }) 
    App.Collections.FeaturedPosts = Backbone.Collection.extend({ 
      model: Post, 
      url:'http://localhost:5000/json/posts/featured', 
    }) 

    // CONTROLLER 
    App.Controllers.Documents = Backbone.Router.extend({ 
      routes:{ 
      "recent"    : "recent", 
      "popular"   : "popular", 
      "featured"   : "featured", 
      }, 

      recent: function(){ 
       //.... same as featured ? 
      }, 
      popular: function(){ 
       //.... same as featured ? 
      }, 
      featured: function(){ 
        $("#browser").empty(); 
        var collection = new App.Collections.Posts(); 
        collection.fetch({ 
           success: function(col,posts){ 
            new App.Views.GuideView({collection: posts}); 
           }, 
           error: function(error){ 
            console.log(error) 
           } 
         }) 
      } 
    }); 

Answer 1

有這樣做的許多不同的方式。這可能是'最佳實踐'。

App.Controllers.Documents = Backbone.Router.extend({ 
     routes:{ 
     "recent"    : "recent", 
     "popular"   : "popular", 
     "featured"   : "featured", 
     }, 

     initialize: function() { 
      this.collection = new App.Collections.Posts(); 
     }, 

     _showPage: function (config) { 
      $("#browser").empty(); 

      this.collection.fetch({ 
       url: config.url, 
       success: function(col,posts){ 
        new App.Views.GuideView({collection: posts}); 
       }, 
       error: function(error){ 
        console.log(error) 
       } 
      }); 
     }, 

     recent: function(){ 
      this._showPage({url:'http://localhost:5000/json/posts/recent'}); 
     }, 
     popular: function(){ 
      this._showPage({url:'http://localhost:5000/json/posts/popular'}); 
     }, 
     featured: function(){ 
      this._showPage({url:'http://localhost:5000/json/posts/featured'}); 
     } 
}); 

因爲我真的不知道你的網頁有多複雜，這可能是我沒有更多信息就可以做的最好的。但是，這個想法是，「this.collection」是在路由器初始化時設置的，所以你可以繼續使用它。 _showPage方法可以完成顯示頁面所需的任何基本任務，並且路由所調用的方法可以在執行細節前使用它來完成所需的基本任務。傳遞到配置文件的url只會告訴集合從哪裏得到它的信息 - 我假設你的所有數據都有相同的格式和'是同一個東西'..只是不同的過濾器。

你或許可以做類似的事情與App.Views.GuideView：

App.Controllers.Documents = Backbone.Router.extend({ 
     routes:{ 
     "recent"    : "recent", 
     "popular"   : "popular", 
     "featured"   : "featured", 
     }, 

     initialize: function() { 
      this.collection = new App.Collections.Posts(); 
      this.view = new App.Views.GuideView({collection: this.collection}); 
     }, 

     _showPage: function (config) { 
      $("#browser").empty(); 

      this.collection.fetch({ 
       url: config.url, 
       success: _.bind(function(col,posts){ 
        this.view.render(); 
       }, this), 
       error: function(error){ 
        console.log(error) 
       } 
      }); 
     }, 

     recent: function(){ 
      this._showPage({url:'http://localhost:5000/json/posts/recent'}); 
     }, 
     popular: function(){ 
      this._showPage({url:'http://localhost:5000/json/posts/popular'}); 
     }, 
     featured: function(){ 
      this._showPage({url:'http://localhost:5000/json/posts/featured'}); 
     } 
}); 

的「渲染」會剛剛重建的看法，因爲你已經得到了在視圖「this.options引用的集合。集合「（或者你可以添加一個'初始化'到視圖，並將this.collection設置爲this.options.collection）。當集合得到更新時，所有這些信息都是在視圖中引用的..所以不需要重置它。

Answer 2

我認爲最好的實踐是擁有3個集合，每個集合都有它的URL和屬性。

這使得代碼更易於維護，你可以在一個單獨的文件，而不是有一個「神集」有所有裏面的邏輯分配不同的事件和監聽到他們。

當然，你仍然可以保持乾燥，保持輔助對象或代碼父集合，是commmon所有這些藏品。