[英]How to use dijit requires in parsed dojo ContentPane
我正在嘗試做一個簡單的任務。 此任務是將包含dijit.Form
的HTML dijit.Form
到ContentPane
。 我不知道在加載此HTML之前需要哪些dijit,但是加載的HTML將包含適用的require
來加載它們。
因此,為了能夠從加載的HTML執行腳本,我使用dojox.layout.ContentPane
。 但是,當我將parseOnLoad
設置為true
,解析是在腳本執行之前進行的,因此在首次加載內容時不可用dijits。 另外,當我嘗試使用onDownloadEnd
回調時,運行此回調時,仍然不會加載require
的dijits。
我唯一想到的就是使用setTimeout
將解析推遲到執行這些腳本的時間。 我不喜歡這種解決方案,因為它可能會不時失敗,並且會使應用程序的責任感降低。
因此,我應該如何執行分析,以使其在加載的HTML的require
語句運行后立即發生?
我可以看到兩個可能的解決方案-都使用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
中進行操作(請參閱操作http:// jsfiddle。凈/ 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 }); } });
編輯 :我只是有這樣一個想法,編寫一個自動需求(針對Dojo <1.8)僅是添加一個簡短的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/
您唯一的選擇是設置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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.