如何在解析的 dojo ContentPane 中使用 dijit requires答案

【问题标题】：How to use dijit requires in parsed dojo ContentPane如何在解析的 dojo ContentPane 中使用 dijit requires
【发布时间】：2012-09-22 17:02:53
【问题描述】：

我正在尝试做一个简单的任务。此任务是将包含dijit.Form 的HTML 加载到ContentPane 中。在加载此 HTML 之前，我不知道需要哪些 dijit，但加载的 HTML 将包含适用的 require 来加载它们。

所以为了能够从加载的 HTML 中执行脚本，我使用了dojox.layout.ContentPane。但是，当我将 parseOnLoad 设置为 true 时，解析发生在脚本执行之前，因此首次加载内容时 dijit 不可用。此外，当我尝试使用onDownloadEnd 回调时，运行此回调时，来自require 的dijit 仍未加载。

我唯一能想到的就是使用setTimeout 将解析推迟到执行这些脚本的时间。但是我不喜欢这种解决方案，因为它可能会不时失败，并且会降低应用程序的责任感。

那么我应该如何执行解析，以便它在加载的 HTML 中的 require 语句运行之后立即发生？

【问题讨论】：

标签： javascript ajax dojo js-amd

【解决方案1】：

我可以看到两种可能的解决方案 - 都使用dijit/layout/ContentPane：

使用 Dojo 1.8.0，因为解析器支持 auto require，它会自行加载依赖项，如您在此处看到的：http://jsfiddle.net/phusick/vr4h4/

将依赖项列表放入表单模板的某个位置，例如在dijit/form/Form 的data-config 属性中：

<form 
    data-dojo-type="dijit.form.Form" 
    data-config='"deps":["dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button"]'>

    <input data-dojo-type="dijit.form.TextBox" data-dojo-props="placeholder:'TextBox'">
    <button data-dojo-type="dijit.form.Button">Button</button>

</form>

为dijit/layout/ContentPane设置parseOnLoad:false，加载模板，获取依赖列表，require它们，然后在你的ContentPane的工厂函数parser.parse()containerNode中（看它在行动@ 987654323@):

require([
    "dojo/ready",
    "dojo/dom",
    "dojo/query",
    "dojo/on",
    "dojo/parser",
    "dojo/json",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(ready, dom, query, on, parser, JSON) {

    var template, dijits;

    ready(function() {
        template = dom.byId("template").textContent;
        on.once(dom.byId("loadFormButton"), "click", loadForm);
        contentPane1.set("parseOnLoad", false);
        contentPane1.on("load", parseForm);
    });

    function loadForm() {
        contentPane1.set("content", template);  
    }

    function parseForm() {
        // a node to parse
        var node = contentPane1.containerNode;
        // obtain a list of dependencies
        var config = JSON.parse("{" + query("form", node)[0].dataset.config + "}");

        // require (AMD load) dependencies
        require(config.deps, function() {
            // parse ContentPane content when dependencies are resolved
            dijits = parser.parse(node); 
            console.log(dijits); // an array of instantiated dijits
        });
    }      
});

编辑：我刚刚想到写一个自动 require（对于 Dojo getDependencies() 方法，所以你不需要像我一样列出依赖项上面第二个选项中提到：

function getDependencies(/*DOMNode*/ containerNode) {
    var deps = [];
    query("[data-dojo-type]", containerNode).forEach(function(node) {
        var dep = node.dataset.dojoType.split(".").join("/");
        if(!~array.indexOf(deps, dep)) {
            deps.push(dep);
        };            
    });
    return deps;
}

在 jsFiddle 上查看它：http://jsfiddle.net/phusick/hnjWt/

【讨论】：

+1 用于重写 OP 的应用程序逻辑 - 并放弃 dojox.layout.ContentPane.executeScripts :)

【解决方案2】：

您唯一的选择是设置 dojoConfig.async = false 或在代码中的 require 语句中设置。

由于这个原因没有加载模块； require() 不会阻塞 - 当它仍在下载模块时 - 解析器运行。

请参阅http://jsfiddle.net/zA9cJ/1/ 以获取此运行示例

require(["dojox/layout/ContentPane", "dojo/domReady!"], function(pane) {

    var p = new pane({ parseOnLoad: true, executeScripts: true }, 'container');
    var content = '<script type="text/javascript">'+
        'require('+
        //////////////////////////
        '{async:false},'+ ////////
        //////////////////////////
        '["dijit/form/Button"]);'+
        '<'+'/script>'+
        '<div data-dojo-type="dijit.form.Button">Button</div>';
    p.set("content", content);
});

【讨论】：