Question

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

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

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

}）;

在主视图中，我只需点击按钮即可浏览各个视图。

现在，我刚开始使用这个应用程序，我担心，遵循上述工作流程可能会导致立即加载所有视图文件。在所有视图中，我有几个模板加载。那么我最终会在页面渲染之前加载每一个html吗？如果是，那么在上述方法中应该修改什么？

Answer 1

如果您的页面上有太多东西要加载，您可能只需要视图文件。

例如，假设您将拥有一个Userlist View，它可以通过这种方式从您的路由器加载：

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

loadUsersList: function() {

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

        UserListView.render();
    });

}

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

1 个答案: