Backbone Marionette：Marionette.Application導致Require.js模塊加載錯誤，「'錯誤：模塊名'App'尚未加載上下文：_」

Question

我試圖包括應用程序實例來使用它的事件聚合器如圖所示here

我在包含實例的視圖中出現錯誤。

在Requirejs配置文件踢東西了，從App.Bootloader.js：

require(['App'], function (App){ 
     App.start(); 
     }); 

從App.js：

define(function (require){ 

    //...requisite includes $, _, Backbone, Marionette ... 

var Layout = require('Layout'); 

    var App = new Marionette.Application(); 

     App.addRegions({ 
      main: '#view_content' 
     }); 

     App.addInitializer(function(){ 

       App.main.show(new Layout()); 
       //... adding router etc ...  

       Backbone.Marionette.TemplateCache.loadTemplate = function (template, callback){ 
        callback.call(this, Handlebars.compile(template)); 
       }; 
       Backbone.history.start(); 

     }); 

    return App; 
}); 

從Layout.js：

define(function(require){ 
    var View = require('folder/folder/View'); 
    //template contains #sub div 
    var template = require('text!template.html'); 

    return Marionette.Layout.extend({ 
     template: template, 
     regions: { 
     sub: '#sub' 
     }, 
     initialize: function(){ 
     //wait till template is rendered in dom 
     _.defer(function(region){ 
      region.sub.show(new View()); 
      }, this) 
     } 

    }); 

}); 

從/folder/folder/View.js：

define(function (require){ 

     //...requisite includes $, _, Backbone, Marionette ... 

    var App = require('App'); 
    return Marionette.ItemView.extend({}); 
}); 

我在哪裏得到的錯誤「「錯誤：模塊名稱‘應用’尚未加載方面：_」

任何想法？讓我知道你是否需要更多的信息。

Answer 1

我猜你有問題circular dependencies。 App需要View和View需要App。嗯...但爲什麼View要求App？我無法從你的代碼中找到它。最後，你確定View需要App？順便說一句，我想你錯了。第一個From /folder/folder/View.js可能應該是From Layout.js。

Answer 2

我也在尋找處理與這種使用木偶情況的好方法和require.js

我有一個解決方案的工作，但我不知道這是否是最好的方法，在這裏是我的想法：

• 的應用程序，無需瞭解意見
• 我們使用觸發器將動作附加到事件
• 的視圖之間的動作的連接視圖中，並附着到事件的行動應用程序製作 視圖

裏面這是一個可能的解決方案：

app.js

define([ 'underscore', 'jquery', 'backbone', 'marionette' , 'view'], 
    function(_, $, Backbone, Marionette, View ) { 

    var app = new Marionette.Application(); 
    app.addRegions({ content: '#content'}) 

    app.on("initialize:after", function(){ 

     console.log('after init', app) 

     var view = new View(); 
     app.content.show(view); 

    }); 

    // this is the action that we would like to call from the view  
    app.vent.on('viewClick', function(){ console.log('clicked on view')}) 

    return app; 
}); 

view.js

define([ 'underscore', 'jquery', 'backbone', 'marionette' ], 
    function(_, $, Backbone, Marionette) { 

    var View = Marionette.ItemView.extend({ 
     template: '#view', 

     triggers: { 
      'click': 'clicked' 
     }, 

     initialize: function(){ 

      // thisView will be referring to the view instance 
      var thisView = this; 

      // we require the app because we need access to the event aggregator 
      require(['app'], function(app){ 

       // when our event is triggered on our view 
       thisView.on('clicked', function(){ 
        // we trigger an event on the application event aggregator 
        app.vent.trigger('viewClick') 
       }); 
      }); 
     } 
    }) 

    return View 
}); 

需要記住的是需要是異步是非常重要的，所以當我們像這樣使用它時，它不會立即執行：

require(['some-module'], function(someModule){ 
    // do something, but only as soon as someModule is loaded 
}); 

我們可以編寫對象至極點到外部環境，如：

var thisName = this; 
require(['some-module'], function(someModule){ 
    // access to external this using thisName 
}); 

Answer 3

user1248256是正確的。我有同樣的問題。我的應用需要一個控制器，我的控制器需要應用

通過作爲選項的一部分傳入控制器（查看您的代碼），我不必將它添加到require.js定義中。

//data-main: 
define(function(require) { 
    var $     = require("jquery"), 
     _     = require("underscore"), 
     App     = require("app/App"), 
     PublicRouter  = require("routers/DesktopRouter"), 
     PublicController = require("routers/publicController"); 

    var options = { 
     publicController : PublicController, 
     publicRouter  : PublicRouter 

    } 

    App.start(options); 
}); 

現在，在應用程序我沒有 「規定」 的PublicController

//App: 
define(['jquery', 'backbone', 'marionette', 'underscore'], 
function ($, Backbone, Marionette, _) { 
    var App = new Marionette.Application(); 
    ...snip... 
     console.log("Creating Routers"); 
     App.Routers = {}; 
     // Connect controllers to its router via options 
     // init router's router/controller 
     App.Routers.publicRouter = new options.publicRouter.Router({ 
      controller: options.publicController 
     }); 
    }); 

希望有所幫助。

安德魯

Answer 4

我一般認爲這是不好的做法使用requireJS時，如果沒有其他原因，而不是它真的很容易與循環引用拉閘使用的應用程序的EventAggregator。

只需定義一個可由App，View和Layout需要的單獨的EventAggregator模塊，然後將其添加到任何需要它的模塊的依賴關係中。