Backbone Marionette:Marionette.Application导致Require.js模块加载错误,"'错误:模块名称'App'尚未加载上下文:_"

Question

我想包括应用程序实例来使用它的事件聚合器显示在这里

当我在视图中包含实例时出现错误.

从App.Bootloader.js中的Requirejs配置文件中解决问题:

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

我收到错误"'错误:模块名称'App'尚未加载上下文:_"

有任何想法吗？Lemme知道您是否需要更多信息.

Answer 1

我也在寻找一种使用marionette和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是异步的,所以当我们像这样使用它时,它不会立即执行:

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