0

この例に従ってプリローダーを作成したため、手動で解析しようとする次のコードがあります (http://acuriousanimal.com/blog/2010/12/05/how-to-create-a-preloader-in-dojo /):

<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design: 'headline', style: 'width: 100%; height:100%'">
        <div id="contentTabs" class="centerPanel" data-dojo-type="dijit.layout.TabContainer"
             data-dojo-props="region: 'center', tabPosition: 'top', style: 'width: 100%; height:100%'">
            <div data-dojo-type="dijit.layout.BorderContainer" id="inbox" title="Inbox" data-dojo-props="design: 'headline', style: 'width: 100%, height:100%'">
                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true"
                    style="width: 50%; height:100%;">
                    <div id="grid">
                    </div>
                </div>

                <div id="emailcontainer" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer"
                    data-dojo-props="design: 'headline', region: 'center', style: 'width: 100%; height:100%'">
                    <div id="emailUserAccounts" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', style: 'width: 50%; height:14px'">
                        User Reports
                    </div>
                    <div id="emailbody" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', style: 'width: 50%;'">
                        Select an E-Mail from the Inbox
                    </div>
                </div>

            </div>
        </div>

        <div id="toolbar" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'"
            style="text-align: right;">

                <input id="searchtext" type='text' size='50' style="height: 30px;" />

                <button id="searchbtn" type="button" style="width: 120px">
                    Search</button> 
                        <button id="invertbtn" type="submit" style="width: 120px">
                            Invert Status</button>
            <div id="supportstaffselect">
            </div>

                <button id="assignbtn" type="button" style="width: 120px">
                    Assign</button>
            <select id="priorityselect" data-dojo-type="dijit.form.Select" name="priorityselect">
                <option value="0">Low</option>
                <option value="1" selected="selected">Normal</option>
                <option value="2">Medium</option>
                <option value="3">High</option>
                <option value="4">+1</option>
            </select>

                <button id="prioritybtn" type="button" style="width: 120px">
                    Change Priority</button> 
                        <button id="newMessage" type="button" style="width: 120px">
                            New Message</button> 
                                <button id="replybtn" type="button" style="width: 120px">
                                    Reply</button> 
                                        <button id="replyallbtn" type="button" style="width: 120px">
                                            Reply All</button> 
                                                <button id="forwardbtn" type="button" style="width: 120px">
                                                    Forward</button>
        </div>
        <div id="filtersnavigation" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left'" style="width: 130px;">
            <ul class="filterlist">
                <li class="filterlistitem" id="everythingfilter">Everything</li>
                <li class="filterlistitem" id="openfilterid">Open</li>
                <li class="filterlistitem" id="closedfilterid">Closed</li>
                <li class="filterlistitem" id="unrepliedfilterid">Unreplied</li>
                <li class="filterlistitem" id="repliedfilterid">Replied</li>
                <li class="filterlistitem" id="minefilterid">Mine</li>
                <li class="filterlistitem" id="mineunrepliedfilterid">Mine
                    Unreplied</li>
            </ul>         
        </div>               
    </div>

このコードは、Firefox および Chrome では問題やエラーなしで正しく解析およびロードされますが、スクリプト parser.parse() 内で呼び出して BorderContainer または TabContainer を解析しようとすると、IE9 で parser.js が任意のエラーをスローします。

コンソール ログ: 「クラス dijit.layout.BorderContainer を読み込めませんでした」

IE9 が指摘するエラーは、parser.js (dojo-release-1.7.2-src) の 132 行目です。

darray.forEach(nodes, function(obj){
                        if(!obj){ return; }

                        var node = obj.node || obj,
                                type = dojoType in mixin ? mixin[dojoType] : obj.node ? obj.type : (node.getAttribute(dataDojoType) || node.getAttribute(dojoType)),
                                ctor = _ctorMap[type] || (_ctorMap[type] = dlang.getObject(type)),
                                proto = ctor && ctor.prototype;
                        if(!ctor){
        Line 132  ---> throw new Error("Could not load class '" + type);
                        }

上記のコードが parseOnLoad: true を持っているときにIE9でも完全に機能することを考慮に入れると、私が間違っていることについて誰かが考えていますか?

ありがとう

4

1 に答える 1

0

99% の確実性で、エラーはdlang.getObject(type)null ポインターを返すためです。私の推測では、AMD ローダー (おそらく async:true に設定されています) は、エラーで言及されているモジュールのダウンロードと宣言をまだ完了していません。これを克服するには、要件を取り込み、準備ができたら実行する AMD パターンに適応する必要があります (必要な各モジュール)。次のように parser.parse() をラップしてみてください。

<script src="path_to_dj/dojo/dojo.js"></script>
<!-- dojo must be loaded first - obviously -->
<script type="text/javascript">

  require(
    {/*using defaults*/},         /* local conf */ 
    [                             /* every single requirement, mapped to cb params below */
      "dijit/layout/BorderContainer",
      "dijit/layout/TabContainer"
      // optionally uncomment below line to have callback wait domReady event
      //, "dojo/domReady!"
    ],
    function(dep1, dep2, dep3) {  /* callback for XHR.readyState=4/SCRIPT.onload */

          parser.parse(dojo.body());

    }
  );

</script>
于 2012-05-29T20:50:24.617 に答える