骨干和requirejs应用程序中的应用程序结构

Question

我正在开发一个使用backbone和requirejs的应用程序。我已构成的应用程序这样的：

1. 具有<script data-main="app.js" src="vendor-libraries/require.js"></script>

2. 在app.js我喜欢这个主index.html文件：

   require.config({ 
   
       paths:{ 
   //all paths here 
   }, 
   
   shim: { 
       // all shims here 
       }, 
       } 
   }); 
   
       require(['jquery', 
   'Backbone', 
   'views/master', 
   'views/dashboard', 
   //all other views are loaded as dependencies here... 
   
   ],function($,Backbone,masterView,dashboardView, .....){ 
   
       var Router=Backbone.Router.extend({ 
        routes:{ 
          "":"loadDashboard", 
          "home":"loadDashboard", 
          //all routes paths go here 
         }, 
   
        initialize:function(){ 
        this.children={ 
        dashboardView: new dashboardView(), 
        //all views initialized as the dashboard view 
        } 
       }, 
   
       loadDashboard: function(){ 
       this.children.dashboardView.render(); 
       }, 
   
       //functions for all routes here... 
   
       }); 
   
   var router = new Router(); 
   var view=new masterView(); 
   Backbone.history.start(); 
   

   }）;

3. 在主视图中，我只是点击按钮导航到相应的视图。

现在，我只是从这个应用程序开始，我的恐惧是，遵循上述工作流程可能导致一次加载所有视图文件。在所有的观点中，我有几个模板被加载。那么，我会在页面呈现之前加载的每一个html加载？如果是，那么应该在上述方法中修改哪些内容？

Answer 1

那么如果有太多的东西要加载到您的网页上，您可能只需要您的视图文件，因为它们是需要的。

例如假设你将有一个用户列表视图，它可以以这种方式加载从您的路由器：

routes: { 
    ... 
    'userslist' : 'loadUsersList' 
} 

loadUsersList: function() { 

    require('views/userslist',function(UserListView) { 

     UserListView.render(); 
    }); 

}