骨干子视图定义 - 主视图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文件夹下。