骨幹和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(); 
    }); 

}