1

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 ], {

...

3 番目のウィジェットであるダッシュボードには、ボタンが 1 つだけあります。

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 が機能しないことです。依存クラスの 1 つをインスタンス化できないと表示されます。

今、これをアプリの mainScreen の postCreate に追加すると:

var loginForm = new LoginForm({});

次に、コールバック内で LoginForm() が魔法のように機能します (!)。

すべてのコードを投稿したわけではないことはわかっていますが、AMD での依存関係の処理方法に関して、知っておく必要のある魔法はありますか? モジュールがコールバック内で解決されていることを確認するにはどうすればよいですか?

さよなら、

メルク。

4

1 に答える 1

2

これらの発言は、コメント セクションには収まりません。

あなたのコードに欠陥は見当たりませんが、ここにいくつか注意すべき点があります。

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 では、配列の末尾にコンマがあるとエラーが発生します。

于 2012-08-15T09:14:15.830 に答える