在 DOJO 中动态 Div

Question

我尝试在 DOJO 中动态创建 div，div 的数量取决于值 count Div 必须插入 <div data-dojo-type="dijit/layout/TabContainer" id="maintab" style="width:100%; height:100%;">

下

我的动态 divs 必须看起来像 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-id="dtab" title="title" data-dojo-props="selected:false">（看来它是一个书签）

我的问题是如何使用特定的 data-dojo-type 、 id 和 title make 函数此刻我有 `

function myFunction() {
var node = dojo.doc.getElementById('maintab');
node.appendChild += "<div data-dojo-type='dijit/layout/ContentPane' data-dojo-id='testTab' title='test' data-dojo-props='selected:false' >sample text</div>";
}
`

Answer 1

您的 DOM API 用法无效。 appendChild 是您应该调用的函数，它接收一个 DOM 节点。将字符串连接直接应用于 appendChild 在该上下文中没有任何意义（并且连接 innerHTML，你可能会混淆它，无论如何都会变得非常笨拙）。

此外，您正在谈论动态添加声明性小部件标记，但以编程方式简单地创建每个 ContentPane 可能更有意义，也更直接。否则，您还需要运行构建声明性标记后的解析器。

将每个子 ContentPane 分配给相同的变量名也没有多大意义，这是您每次都设置相同的静态 data-dojo-id 时无意中所做的事情。

如果 maintab 已经被解析并实例化为 TabContainer，您可以执行以下操作（我假设是 Dojo 1.6 或更早的样式代码，因为这是您在上面使用的代码）：

function addChild(title) {
    var container = dijit.byId('maintab');
    var child = new dijit.layout.ContentPane({ title: title });
    container.addChild(child);
    return child;
}

如果子窗口小部件的类型也可以不同，您也可以将其传入（此示例还假设您可能希望为每个子窗口部件传入不同的参数）：

function addChild(Constructor, args) {
    var container = dijit.byId('maintab');
    var child = new Constructor(args);
    container.addChild(child);
    return child;
}
// Usage e.g. addChild(dijit.layout.ContentPane, { title: 'Hello' })

如果出于某种原因，您确实 need/want 在解析容器之前构造声明式 HTML，您可以执行如下操作：

function addChildMarkup(moduleId, argsString) {
    // Notice dojo.byId used here to retrieve DOM node
    // (vs. dijit.byId in earlier examples to retrieve widget instance)
    var container = dojo.byId('maintab');
    return dojo.create('div', {
        'data-dojo-type': moduleId,
        'data-dojo-props': argsString
    }, container);
}
// Usage: addChildMarkup('dijit.layout.ContentPane', '{ title: "Hello" }')

在 DOJO 中动态 Div

Dynamically Div in DOJO

html

javascript

jquery

dojo