在視圖中獲取木偶應用程序實例的正確方法是什麼？

Question

我一直在試圖找出在我的應用程序中獲取我的Marionette應用程序實例的最佳方式。我正在使用requirejs，但是我無法弄清楚是否可以通過require獲取應用程序的實際實例。

我已經使用Backbone.Wreqr.EventAggregator和回調爲了抓住應用程序實例，但感覺非常混亂。

我也想避免通過我的各種視圖的構造函數傳遞應用程序實例，因爲我覺得應該有更好的方法。

這是我的數據，主文件的底部：

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

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

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

此代碼工作正常，並啓動了應用程序，但是在我的子視圖和其他組件的應用最終是不確定的。例如，在這種情況下，應用程序未定義：

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; 
}); 

Answer 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(); 
 
    
 
});

<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...