Question

我创建了一个包含多个字段（文本框，按钮，下拉列表等）的UI。我主要使用jQuery append函数来简单地将我的UI元素放在DOM中。现在，我需要将这些元素转换为Dijit小部件。

有没有方便的方法呢？只是为dojoType =＆＃34; dijit.form.Button＆＃34;添加一个属性。足够？此外，由于这个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');

重要提示：此解决方案不是最佳解决方案，因为您首先必须附加“模板”（带有data-dojo-type的按钮），然后运行解析器进行替换它与实际的小部件DOM。

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

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

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

我创建了一个演示两种解决方案的小提琴：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

1 个答案: