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

Question

我正在使用骨干网和 requirejs 开发应用程序。我已经像这样构建了应用程序：

1. 具有<script data-main="app.js" src="vendor-libraries/require.js"></script> 的主 index.html 文件

2. 在 app.js 中我这样做：

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

}