在视图中获取Marionette应用程序实例的正确方法是什么?

时间:2015-10-15 18:02:51

标签: backbone.js requirejs marionette

我一直试图找出在我的应用程序中获取我的Marionette应用程序实例的最佳方法。我正在使用requirejs,但我无法弄清楚是否可以通过require获取应用程序的实际实例。

我使用了Backbone.Wreqr.EventAggregator和回调来获取应用程序实例,但感觉非常混乱。

我还想避免通过各种视图的构造函数传递app实例,因为我觉得应该有更好的方法。

这是我的数据主文件的底部:

define('MyApp', ['App'], function (App) {
    return new App();
});

require(['MyApp'], function (app) {
    app.start();

    Backbone.history.start({
        pushState: true
    });
});

此代码工作正常并启动应用程序,但在我的子视图和其他组件中,应用程序最终未定义。例如,在这种情况下app未定义:

define([
    'marionette',
    '../controllers/Controller',
    'MyApp'
], function (Marionette, Controller, app) {

    var controller = new Controller();

    var Router = new Marionette.AppRouter({
        controller: controller,

        appRoutes: {
            'home' : 'showUserHome'
        }
    });

    return Router;
});

1 个答案:

答案 0 :(得分:1)

我不确定您在申请中错过了什么,但是您已经走上正轨。这是一个工作示例,表明您可以与您发布的代码类似地共享app个实例。



define('MyApp', function(){
  return new Mn.Application();
});

define('LayoutView', ['MyApp'], function(app){
  return Backbone.View.extend({
    render: function(){
      this.$el.append('App Started');
      app.trigger('hey:app');
      return this;
    }
  });
});

define('StuffOnStart', ['MyApp', 'LayoutView'], function(app, LayoutView){
  app.on('start', function(){
    var layoutView = new LayoutView();
    $(document.body).empty().append( layoutView.render().el );
  });
});

require(['MyApp', 'StuffOnStart'], function(app){
  
  app.on('hey:app', function(){
    $(document.body).append( '[<code>app</code> object is successfully shared between require.js modules]' );
  });
  
  app.start();
  
});
&#13;
<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js'></script>
Loading...
&#13;
&#13;
&#13;