Marionette js通過requirejs從控制器訪問應用程序

Question

我想從主控制器 訪問我的主應用程序實例以呈現新的View。我想要做的控制器/ main.js代碼註釋，按照我的理解，這是在要求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(); 
     }, 
    } 
}); 

router.js

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

控制器/ 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

可以異步加載應用程序內部控制的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'); 
    } 
    }); 
});