Dojo 加载器不加载回调中使用的小部件依赖项

Dojo loader not loading widget's dependencies used in callbacks?

本文关键字：加载 小部 依赖 回调 Dojo      更新时间：2023-09-26

我在 Dojo 的加载器上遇到了真正的问题。我发现在这里粘贴代码真的很难，因为这是一个涉及整个应用程序的问题。我创建了一个名为LoginForm的小部件，它的开头是这样的：

define([
"dojo/_base/declare",
"app/globals",
"app/stores",
"dijit/form/Form",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/layout/TabContainer",
"dijit/layout/StackContainer",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/form/Button",
"app/widgets/ValidationPassword",
"app/widgets/ValidationEmail",
"app/widgets/AlertBar",
"app/widgets/StackFading",
"app/widgets/TabFading",
"dojo/_base/lang",
"app/widgets/BusyButton",
"dojo/_base/json",
"dojo/_base/fx",
"dojo/text!app/widgets/templates/LoginForm.html",
], function(
  declare,
 ...
 , json
 , baseFx
 , templateString
 ){
// Create the "login" pane, based on a normal ContentPane
return declare('app.LoginForm', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
  widgetsInTemplate: true,
  templateString:  templateString,

这是一个使用模板的简单小部件，在模板中，一些子小部件，如此处所述。

现在。。。我正在尝试在 Ajax 回调中创建 Loginform 类型的对象。但是，加载程序让我失望了。

该应用程序的主屏幕如下所示：

define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"app/widgets/Dashboard",
"app/globals",
"dijit/layout/BorderContainer",
"dijit/layout/StackContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"app/widgets/SearchPage",
 ], function(
 declare
 , _WidgetBase
...
 , SearchPage

){
// Create the "login" pane, based on a normal ContentPane
return declare('AppMainScreen', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {

。

第三个小部件，仪表板，只有一个按钮：

define([
"dojo/_base/declare",
"app/globals",
"app/defaultSubmit",
"app/stores",
"dijit/form/Form",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"app/widgets/AlertBar",
"app/widgets/BusyButton",
"dojo/_base/json",
"dojo/domReady!",
], function(
  declare
 , g
 , ds
 , stores
 , Form
 , _WidgetBase
 , _TemplatedMixin
 , _WidgetsInTemplateMixin
 , AlertBar
 , BusyButton
 , json
){
// Create the "login" pane, based on a normal ContentPane
return declare('app.Dashboard', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {

widgetsInTemplate: true,
templateString: '' +
    '<div>' +
    '  <div data-dojo-type="app.AlertBar" data-dojo-attach-point="alertBar"></div>' +
    '  <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form" method="POST"> ' +
    '    <input type="submit" data-dojo-attach-point="button" data-dojo-type="app.BusyButton" label="Create!" />' +
    '  </form>' +
    '</div>',

然后，该表单的onSubmit链接到"app/defaultSubmit",中的函数，该函数如下：

define([
'app/globals',
'dijit/registry',
'dojo/query',
'dojo/aspect',
'dojo/_base/lang',  
'dojo/_base/json',
'dijit/Tooltip',
'dijit/Dialog',
'app/widgets/LoginForm',
],function(
g
, registry
, query
, aspect
, lang
, json
, Tooltip
, Dialog
, LoginForm
){

问题是LoginForm不起作用，因为LoginForm的构造函数不起作用：它说它不能实例化其中一个依赖类。

现在，如果我将其添加到应用程序的主屏幕的postCreate中：

var loginForm = new LoginForm({});

然后，在回调中，LoginForm（） 神奇地工作 （！）。

我知道我没有发布所有代码，但是在AMD中如何处理依赖项方面，我需要了解什么魔术吗？如何确保在回调中解析模块...？

再见

默克。

这些评论并不适合评论部分。

我看不到您的代码中的缺陷，但这里有一些事情需要注意。

关于 AMD 加载程序的说明

不要对加载顺序做出假设。

require(["foo", "bar", function (foo, bar) {
  // use foo and bar
});

由于加载是异步的，因此可以首先加载和调用foo或bar。唯一可以保证的是，当调用回调函数时，它们都将被加载。"foo"解析的事情是其define函数返回的任何内容;如果这是undefined请确保函数返回一个值。

避免循环依赖。

//bar.js
define(["foo"], function (foo) {
  return {};
});
//foo.js
define(["bar"], function (bar) {
  return {};
});

行为是定义的（请参阅有关模块的文档），但可能难以管理。检查是否没有通过传递依赖项引入这些依赖项（A -> B -> C -> A .）

在尝试分析模板之前加载可传递模板依赖项。

define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/parser",
        "dijit/form/Button" //need to load this even though it is
                            //not referenced in the function
       ],
        function(declare, _WidgetBase, parser) {
    // pretend this is some custom template format (e.g. DTL)
    var template = "<div data-dojo-type='dijit.form.Button'></div>";
    return declare("foo.Foo", [_WidgetBase, _TemplatedMixin], {
        postCreate: function() {
            this.domNode.innerHTML = template;
            parser.parse(this.domNode);
        }
    });
});

在适当的情况下，将_WidgetsInTemplateMixin与标准模板微件一起使用。

此外，请务必阅读 1.7 发行说明，了解陷阱和注意事项。

注意：此代码未经测试。

顺便说一句，数组上的尾随逗号将导致IE7中的错误。

相关文章：