Question

我正在尝试在Dojo中使用模板，但无论我做什么，我都无法在代码中实例化以产生任何结果。我已经尝试过我在网上找到的几个例子，但坦率地说，我找不到一个好的端到端的例子。

到目前为止，我有一个DOM元素：

<div id='services'></div>

我想填充从这个类生成的HTML片段：

require([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dojo/text!app/templates/service.html"
],
  function(declare, _WidgetBase, _TemplatedMixin, template) {

    declare("service",
      [_WidgetBase, _TemplatedMixin], {
        templateString: template,
        constructor: function () {
            // summary:
            //    description
            console.log("Class is a " + this.declaredClass);
        },
        name:'',
        url:''
    });
});

HTML片段/模板如下所示：

<label>
  <input type="checkbox" name="${name}" value=""/>
  <span class="layerToggle">${name}</span>
</label>

我用另一种方法称呼它：

function populateServices() {
  var serviceUrl = 'https://services.example.com/services?token=' + auth.token;
  utils.getJson(serviceUrl).then(function(json) {
      for (var i = 0; i < json.services.length; i++) {
        var serviceItem = new service({
          name: json.services[i].name,
          url: json.services[i].url
        });
        console.log(serviceItem); //doesn't fire or empty
        domConstruct.place(serviceItem, "services", "last");
      };
    });
  }

该类确实实例化了一次，但没有其他工作。

有没有人看到任何问题？或者我是否会以模板的工作方式为基础？

Answer 1

几乎是正确的。问题是您的窗口小部件不是DOM节点，因此以下代码将失败：

domConstruct.place(serviceItem, "services", "last");

以编程方式创建窗口小部件实例时，可以提供2个参数。第一个是您提供的选项：

{
    name: json.services[i].name,
    url: json.services[i].url
}

第二个参数是它应该用于放置的DOM节点。您应该使用第二个参数将小部件放在DOM上，例如：

var serviceItem = new service({
    name: json.services[i].name,
    url: json.services[i].url
}, domConstruct.create("label", null, "services", "last"));

然后您不再需要使用domConstruct.place了。您可以在this JSFiddle找到结果。

另一种可能性就是简单地使用domNode属性，例如：

domConstruct.place(serviceItem.domNode, "services", "last");

作为JSFiddle：http://jsfiddle.net/g00glen00b/9d3pb/1/

注意：我可以执行您的代码，console.log()也能正常运行。所以我假设你可能还需要解决一些其他问题。验证您是否正确导入了服务窗口小部件，以及您的服务是否具有正确的JSON响应。

Dojo模板手动实例化并填充JSON数据

1 个答案: