Dojo 不能以编程方式连接 djit？

Question

使用此代码：

var d = new dijit.Dialog({
    title: "Programatic Dialog Creation",
    style: "width: 300px",
});
var button1 = new dijit.form.Button({'label': 'one', 'onClick': function () {
        alert('one')
}});

var button2 = new dijit.form.Button({'label': 'two', 'onClick': function () {
        alert('two');
}});
d.attr("content", button1 + ' | ' + button2);
d.show();

预期结果：一个带有两个按钮的对话框

实际结果：带有文本的对话框

[小部件 dijit.form.Button, dijit_form_Button_4] | [小部件 dijit.form.Button, dijit_form_Button_5]

我做错了什么？完成这项任务的正确方法是什么？ 我试过 dojo.place 和 dojo.query 都没有成功。

Answer 1

您正在混淆 Dijit 对象、DOM 节点和字符串。

将 Dijit 放入 Dialog 或任何容器小部件的正确方法是：

dojo.place(button1.domNode, d.containerNode);
dojo.place(button2.domNode, d.containerNode);
d.show();

或者您可以在创建 Dijit 对象时调用 placeAt() 方法：

var button1 = new dijit.form.Button({'label': 'one', 'onClick': function () {
    alert('one')
}}).placeAt(d.containerNode);

你得到了你的结果，因为基本上发生的是

d.attr("content", button1.toString() + '|' + button2.toString());

另请注意，可以通过这种方式插入字符串：

var button1Html = dojo.create("div").appendChild(button1.domNode).parentNode.innerHTML;
var button2Html = dojo.create("div").appendChild(button2.domNode).parentNode.innerHTML;
d.set("content", button1Html + "|" + button2Html);

但它不起作用，因为它会创建 Dijit 对象（按钮）中未引用的新 DOM 节点，因此您的事件不会触发。