主干木偶:木偶.应用程序导致 Require.js 模块加载错误，“'错误:尚未为上下文加载模块名称'A

Backbone Marionette: Marionette.Application causing Require.js module load error, "'Error: Module name 'App' has not been loaded yet for context: _"

本文关键字：错误 模块 加载 上下文 Require js 木偶 应用程序      更新时间：2023-09-26

我正在尝试包含应用程序实例以使用它的事件聚合器，如下所示

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

在 Requirejs 配置文件中启动操作，来自 App.Bootloader.js：

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

从应用程序.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;
});

从布局.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({});
});

我收到错误"'错误：尚未加载上下文的模块名称'应用程序'的位置：_"

有什么想法吗？莱姆知道您是否需要更多信息。

我也在寻找一种使用木偶和要求来处理这种情况的好方法.js

我已经研究过一个解决方案，但我不知道这是否是最好的方法，以下是我的想法：

  • 应用程序具有附加到事件的操作，而无需了解视图
  • 在视图中，我们使用触发器将操作附加到事件
  • 视图和应用程序之间的操作连接是在视图中进行的

这是一个可能的解决方案：

应用.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;
});

查看.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
});

我想你在循环依赖方面有问题。 App需要View，View需要App。嗯。。。但为什么View需要App？我无法从您的代码中弄清楚。最后，你确定View需要App吗？顺便说一句，我认为你打错了。第一个From /folder/folder/View.js可能应该是From Layout.js.

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

现在在应用程序中，我不必"要求"公共控制器

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

希望有帮助。

安德鲁

我通常认为在使用requireJS时使用应用程序的EventAggregator是一种不好的做法，如果没有其他原因，那就是很容易结束循环引用。

只需定义应用、视图和布局可能需要的单独事件聚合器模块，然后将其添加到需要它的任何模块的依赖项中。

相关文章：