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.js 在尝试通过在脚本 parser.parse() 中调用来解析 BorderContainer 或 TabContainer 时在 IE9 中引发任意错误，例如

控制台日志：“无法加载类 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);
                        }

如果您考虑到即使在 IE9 中当我有 parseOnLoad: true 时上述代码也能完美运行，是否有人知道我做错了什么？

谢谢

4

1 回答 1

0

有 99% 的把握，错误是由于dlang.getObject(type)返回一个空指针。我的猜测是 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 回答