如何使用requireJs定义正确的顺序控制器，路由器和应用 [英] How to define controller, router and app in the right order using requireJs

问题描述

我写一个小的应用程序（ initApp.js ， initApp.routinj.js ， initApp.controller.js ）的模块需要使用需要加载。结果
这里是我的code（*）。结果
使用的console.log 在我看到的模块是如何加载的顺序是按照每个模块：

  1）initController
2）initRouting
3）initApp
 

这是正确的顺序？

现在另外一个问题。结果
在 initApp.controller.js 我需要访问功能如 initHeader 和 initSidebar （在 initApp.js ）。结果
但你可以从我的code见（ initApp.controller.js ），的console.log（'initController'，应用程序）; 收益未定义。结果
为了解决这个问题，我在 initApp.controller.js 中定义的功能 getApp 。结果
但是可以肯定有一个更好的方式来完成这项任务。结果
任何想法？结果
谢谢

（*）

---

** ** main.js

 定义（[
    JS /应用程序'，
    'JS /初始化/ initApp'，
//'JS /任务/ tasksApp
]
功能（应用程序）
{
    使用严格的;
    App.initialize（）;
}）;
 

---

** ** initApp.js

  / *定义全球* /
定义（[
    '骨干'，
    JS /应用程序'，
    JS / INIT / initApp.routing'，
    JS /初始化/视图/ sidebarView'，
    JS /初始化/视图/ headerView'，
]
功能（骨干网，应用，路由器，SidebarView，HeaderView）
{
    使用严格的;
    的console.log（'initApp'，路由器）
    VAR initApp =新Backbone.Marionette.Application（{        initHeader：功能（）
        {
            VAR headerView =新HeaderView（）;
            App.header.show（headerView）;
        }，        initSidebar：功能（）
        {
            VAR sidebarView =新SidebarView（）;
            App.sidebar.show（sidebarView）;
        }    }）;    返回initApp;
}）;
 

---

** initApp.routin，JS **

  / *定义全球* /
定义（[
    '骨干'，
    '木偶'，
    JS / INIT / initApp.controller
]
功能（骨干，木偶，控制器）
{
    使用严格的;
    的console.log（'initRouting'，控制器）
    VAR路由器= Backbone.Marionette.AppRouter.extend（{        appRoutes：{
            *默认值：索引
        }    }）;
    回到新的路由器（{
        控制器：控制器
    }）;}）;
 

---

** ** initApp.controller.js

  / *定义全球* /
定义（[
    JS / INIT / initApp
]
功能（应用）
{
    使用严格的;
    的console.log（'initController'，应用）; //未定义
    VAR getApp =功能（）{
        VAR initApp;
        需要（['JS / INIT / initApp']，功能（应用程序）{
            initApp =应用;
        }）;
        返回initApp;
    };    VAR控制器= {
        指数：功能（）
        {
            VAR应用= getApp（）;
            app.initHeader（）;
            app.initSidebar（）;
        }
    }    返回控制器;}）;
 




解决方案

不知道这是否是实现的事情以正确的方式，但是，你的情况，如果您加载在这个顺序将是工作的模块。

  1）initApp
2）initController
3）initRouting
 

因此​​，这意味着你的 main.js 应该是：

 定义（[
    JS /应用程序'，
    JS / INIT / initApp.routing
]
功能（应用程序）
{
    使用严格的;
    App.initialize（）;
}）;
 

I am writing a small app (initApp.js, initApp.routinj.js, initApp.controller.js) which modules needs to be loaded using requires.
Here's my code (*).
Using console.log in each modules I see that the sequence how the modules are loaded is the following:

1) initController 
2) initRouting 
3) initApp 

Is this the right order?

Now another question.
In initApp.controller.js I need to access the function like initHeader and initSidebar (defined in initApp.js).
But as you can see from my code (initApp.controller.js), console.log('initController', app); returns undefined.
In order to fix this issue I defined the function getApp in initApp.controller.js.
But for sure there is a better way to accomplish this task.
Any idea?
Thanks

(*)

---

** main.js **

define([
    'js/app',
    'js/init/initApp',
//    'js/tasks/tasksApp'
],
function (App)
{
    "use strict";
    App.initialize();
});

---

** initApp.js **

/*global define*/
define([
    'backbone',
    'js/app',
    'js/init/initApp.routing',
    'js/init/views/sidebarView',
    'js/init/views/headerView',
],
function (Backbone, App, Router, SidebarView, HeaderView)
{
    "use strict";
    console.log('initApp', Router)
    var initApp = new Backbone.Marionette.Application({

        initHeader: function ()
        {
            var headerView = new HeaderView();
            App.header.show(headerView);
        },

        initSidebar: function ()
        {
            var sidebarView = new SidebarView();
            App.sidebar.show(sidebarView);
        }

    });

    return initApp;
});

---

** initApp.routin,js **

/*global define*/
define([
    'backbone',
    'marionette',
    'js/init/initApp.controller'
],
function(Backbone, Marionette, controller)
{
    "use strict";
    console.log('initRouting', controller)
    var Router = Backbone.Marionette.AppRouter.extend({

        appRoutes: {
            '*defaults': 'index'
        }

    });
    return new Router({
        controller: controller
    });

});

---

** initApp.controller.js **

/*global define*/
define([
    'js/init/initApp'
],
function(app)
{
    "use strict";
    console.log('initController', app); // undefined
    var getApp = function () {
        var initApp;
        require(['js/init/initApp'], function (app) {
            initApp = app;
        });
        return initApp;
    };

    var controller = {
        index: function ()
        {
            var app = getApp();
            app.initHeader();
            app.initSidebar();
        }
    }

    return controller;

});

解决方案

Not sure if it will be the right way to implement things, but, in your case, if you load the modules in this order it will be work.

1) initApp
2) initController
3) initRouting

So it means your main.js should be:

define([
    'js/app',
    'js/init/initApp.routing'
],
function (App)
{
    "use strict";
    App.initialize();
});

这篇关于如何使用requireJs定义正确的顺序控制器，路由器和应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！