将 jQuery 个生成的 dom 个节点转换为 dijit

Question

我制作了一个包含多个字段（文本框、按钮、下拉菜单等）的 UI。我主要使用 jQuery 追加函数将我的 UI 元素简单地放置在 DOM 中。现在，我需要将这些元素转换为 Dijit 小部件。

有什么方便的方法吗？仅仅为 dojoType = "dijit.form.Button" 添加一个属性就够了吗？另外，由于这个 UI 跨越多个文件，我是否每次需要使用 dijit 时都必须使用 require ？

这是我的 UI 代码片段。

$("#generatedContent").append("<fieldset id = 'someFieldSet'><legend>Test</legend></fieldset>");

    $("#someFieldSet").append("<label for = 'fileName'>File Name</label><input id = 'fileName'></input><br/>");
    $("#someFieldset").append("<label for = 'secondFile'>Second File Name</label><input id = 'secondFile'></input><br/>");

Answer 1

有几件事你必须做。首先，如果你想用 jQuery 附加 Dijit 小部件，你可以做你提到的事情，例如：

$('#generatedContent').append('<button data-dojo-type="dijit/form/Button">My button</button>');

但是，您还必须导入所需的小部件和解析器，它将声明性标记解析为 dijit 小部件。例如：

require(['dojo/parser', 'dijit/form/Button'], function(parser) {

});

但是，解析器不会自动运行。您可以在加载页面时将其配置为整个 DOM 运行，但是您的元素是动态添加的，因此这也不起作用。

对于运行解析器，您使用：

parser.parse('generatedContent');

重要：这个解决方案不是最好的，因为你首先必须附加一个"template"（带data-dojo-type的按钮），然后您运行解析器将其替换为实际的小部件 DOM。

Dijit 小部件也有一个 API 您可以使用，例如：

require(['dijit/form/Button'], function() {
    var btn = new Button({ label: 'My button' });
    $('#generatedContent').append(btn.domNode);
});

这是推荐的方法，应该会给您带来更好的性能。它还使以后添加事件处理程序和其他内容变得容易得多。

我创建了一个 fiddle 来演示这两种解决方案：http://jsfiddle.net/L20fysnf/

关于 require()，每次需要引用 Dijit 小部件时都添加它。因此，如果您有多个文件，您可能必须将它添加到所有这些文件中（除非您不在该文件中使用 Dijit 小部件）。

如果您在 JavaScript 文件的多个位置需要 Dijit 小部件，您可以将所有代码包装在 require() 块中，例如：

function fnOne() {
  require(['dijit/form/Button'], function(Button) {
    // Stuff
  });
}

function fnTwo() {
  require(['dijit/form/TextBox'], function(TextBox) {
    // Stuff
  });
}

等同于：

require(['dijit/form/Button', 'dijit/form/TextBox'], function(Button, TextBox) {
  function fnOne() {
    // Stuff
  }

  function fnTwo() {
    // Stuff
  }
});

将 jQuery 个生成的 dom 个节点转换为 dijit

Convert jQuery generated dom nodes to dijit

html

javascript

jquery

user-interface

dojo