javascript - Marionette js 使用 requirejs 从 Controller 访问应用程序

Question

我想从主 Controller 访问我的主应用程序实例 渲染新 View 。我想要做的是在controller/main.js代码中进行注释，因为我知道这是require js中的循环依赖，但我不明白如何解决这个问题

 file structure
       - controllers/main.js
       - models/
       - templates/
       - views/
       - app.js
       - main.js
       - router.js

main.js

require.config({...})
require(['app'], function(app) {
    app.initialize().start();
});

app.js

define(['jquery', 'underscore', 'backbone', 'marionette', 'router','controllers/main'],
function($, _, Backbone, Mn, Router, MainController) {

    let app = null;

    const App = Mn.Application.extend({
        region: '#app',
        initialize(options) {
            this.router = options.router;
        },
        onBeforeStart() {
            console.log('before start');
        },
        onStart() {
            Backbone.history.start();
        }
    });

    return {
        get instance() {
            return app;
        },
        initialize() {

            if (!app) {
                const controller = new MainController();
                const router = new Router({controller});
                app = new App({router});
            }
            return this;
        },
        start() {
            this.instance.start();
        },
    }
 });

路由器.js

define([
    'jquery',
    'underscore',
    'marionette',
], function($, _, Mn) {
    return Mn.AppRouter.extend({
        initialize(options) {
            this.controller = options.controller;
        },
        appRoutes: {
            '': 'index',
            'profile': 'profile',
            '*notFound': 'notFound'
        },
    });
});

Controller /main.js

define(['jquery', 'underscore', 'marionette', 'app'], function($, _, Mn, app) {
    return Mn.Object.extend({
        index() {
            console.log(app); // undefined
            console.log('index method invoked');
             /*
             i want to do like this
             app.showView(new SomeView());
             or this.triggerMethod('render', 'someView') and then listen for this event from app.js like this.router.controller.on('render', handler) and dynamic require somehow... 
             or what is best practice ? iam confused
             */
        },
        profile() {
            console.log('profile method invoked');
        },
        notFound() {
            console.log('notFound method invoked');
        }
    });
});

Answer 1

您可以在 Controller 的 index 方法中异步加载应用程序(无论您需要什么地方)，而不是将其添加为模块的依赖项

define(['jquery', 'underscore', 'backbone', 'marionette', 'router','controllers/main'],
  function($, _, Backbone, Mn, Router, MainController) {

    const App = Mn.Application.extend({
      region: '#app',
      initialize(options) {
        this.router = options.router;
      },
      onBeforeStart() {
        console.log('before start');
      },
      onStart() {
        Backbone.history.start();
      }
    });

    const controller = new MainController();
    const router = new Router({
      controller
    });

    return app = new App({
      router
    });
  });

define(['jquery', 'underscore', 'marionette'], function($, _, Mn) {
  return Mn.Object.extend({
    index() {
      require(['app'],function(app){
        console.log(app);
      });
    },
    profile() {
      console.log('profile method invoked');
    },
    notFound() {
      console.log('notFound method invoked');
    }
  });
});