骨幹子視圖定義 - 主視圖VS路由器

Question

這裏是我的骨幹路由器看起來像

define([ 
    "jquery", 
    "underscore", 
    "backbone" 
], function ($, _, Backbone) { 

    return Backbone.Router.extend({ 
     routes: { 
      "overview": "overview" 
     }, 

     overview: function() { 
      require([ 
       "views/overview", 
       "models/user-collection", 
       "grid", 
       "spreadsheet" 
      ], function (OverviewView, TestCollection, GridView, SpreadSheetView) { 
       // Data 
       var collection = new TestCollection(); 

       // Main view 
       var view = new OverviewView({ 
        el: "#page", 
        collection: collection 
       }); 

       // Sub view #1 
       var gridView = new GridView({ 
        el: "#backgridWrapper" 
       }); 

       // Sub View #2 
       var spreadsheetView = new SpreadSheetView({ 
        el: "#handsontableWrapper" 
       }); 

       // Flow 
       collection.fetch({ 
        success: function() { 
         view.render(); 
         gridView.render(); 
         spreadsheetView.render(); 
        } 
       }); 

      }); 
     } 
    }); 
}); 

正如你可以看到有幾個觀點：

1. 主視圖
2. 副視點＃ 1
3. 子視圖＃2

I'v e做了很多關於如何在Backbone中組織視圖和子視圖的搜索，但是他們都應該直接在視圖定義中創建一個新的子視圖實例，以便路由器只知道主視圖...

所以問題是 - 在路由器上處理子視圖，而不是直接在視圖構造器處理它是個好主意嗎？

Answer 1

路由器應該只是處理路由和初始化的東西。

像抓取數據的東西應該放在使用它的視圖中 - 視圖顯示數據或錯誤消息（如果發生故障），所以我認爲讓視圖抓取數據而不是路由器是明智的只對路線感興趣並且對數據不感興趣。

，我更喜歡初始化子的意見，他們的父母鑑於裏面，而不是別的地方。該父 - 子關係本身證明的是，你最好不要讓他們的父母不是一個陌生人的孩子，讓他們得到更好的控制之下，你可以很容易地找到他們後，以及:)

多數是見仁見智，但事情是如果你不這樣做，你的代碼很快就會在路由器中變得混亂，而不是組織得很好。

下面是我將如何構造相同的東西。

請注意，我正在初始化子視圖作爲父視圖渲染方法的一部分。這可以在初始化父視圖時完成，但我認爲沒有必要這樣做，除非父視圖成功獲取數據並正在繼續呈現它自己。

define([ 
    "jquery", 
    "underscore", 
    "backbone" 
], function($, _, Backbone) { 

    return Backbone.Router.extend({ 
    routes: { 
     "overview": "overview" 
    }, 
    overview: function() { 
     require(["views/overview"], function(OverviewView) { 
     // initialize Main view 
     var view = new OverviewView({ 
      el: "#page" 
     }); 
     }); 
    } 
    }); 
}); 

define([ 
    "jquery", 
    "underscore", 
    "backbone", 
    "models/user-collection", 
    "grid", 
    "spreadsheet" 
], function($, _, Backbone, TestCollection, GridView, SpreadSheetView) { 

    return Backbone.View.extend({ 
    initialize: function(options) { 
     this.collection = new TestCollection(); 
     this.fetchData(); 
    }, 
    events: {}, 
    render: function() { 
     // rendering subviews is part of rendering their parent view. 
     //I prefer to do that here 

     // Sub view #1 
     this.gridView = new GridView({ 
     el: "#backgridWrapper" 
     }); 
     // Sub View #2 
     this.spreadsheetView = new SpreadSheetView({ 
     el: "#handsontableWrapper" 
     }); 
    //Below lines can be handled while initializing the respective view 
    // (In their initialize() method, or after fetching some data etc 
    // or can be chained with the above initialization if their render() method returns a reference to itself (`return this`) 
     this.gridView.render(); 
     this.spreadsheetView.render(); 
    }, 
    fetchData: function() { 
     var view = this; 
     this.collection.fetch({ 
     success: function() { 
      view.render(); 
     } 
     }); 
    } 
    }); 
}); 

側面說明：我強烈建議不要把收集models文件夾下。