0

私は簡単な仕事をしようとしています。このタスクは、HTML包含dijit.FormをにロードすることContentPaneです。このHTMLをロードする前に必要なdijitはわかりませんが、ロードされたHTMLには、requireそれらをロードするための適切なが含まれています。

したがって、ロードされたHTMLからスクリプトを実行できるようにするために、を使用しますdojox.layout.ContentPane。ただし、に設定parseOnLoadすると、スクリプトの実行前にtrue解析が行われるため、コンテンツを最初にロードするときにdijitsを使用できません。また、コールバックを使用しようとすると、このコールバックが実行されても、のdijitsはロードされません。onDownloadEndrequire

私が考えることができるのはsetTimeout、これらのスクリプトが実行される時間まで解析を延期するために使用していることだけです。ただし、このソリューションは時々失敗する可能性があり、アプリケーションの責任が少なくなるため、このソリューションは好きではありません。

requireでは、ロードされたHTMLからのステートメントが実行された直後に解析が行われるようにするには、どのように解析を実行する必要がありますか？

4

2 に答える 2

2

私は2つの可能な解決策を見ることができます-両方ともdijit/layout/ContentPane:

  1. パーサーはauto requireをサポートしているため、Dojo 1.8.0 を使用してください。ここで確認できるように、依存関係自体をロードします: http://jsfiddle.net/phusick/vr4h4/

  2. 依存関係のリストをフォーム テンプレートのどこかに入れます (例: の属性data-config) 。dijit/form/Form

    <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>

    に設定parseOnLoad:falseしdijit/layout/ContentPane、テンプレートをロードし、依存関係のリストを取得し、requireそれらをファクトリ関数parser.parse() containerNodeで取得しますContentPane(アクションhttp://jsfiddle.net/phusick/QA4gH/を参照):

    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
        });
    }      
});
​

EDIT : auto require (Dojo <1.8 の場合) を作成することは、短いメソッドを追加するだけであるという考えを得たgetDependencies()ので、上記の 2 番目のオプションで述べたように、依存関係をリストする必要はありません。

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/

于 2012-09-22T20:28:12.307 に答える
1

Only option you have is to set dojoConfig.async = false or set in the require statements in your code.

The modules are not loaded for this reason; require() does not block - and whilst it is still downloading modules - the parser runs.

See http://jsfiddle.net/zA9cJ/1/ for running sample of this

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);
});​
于 2012-09-22T19:06:00.513 に答える