Question

我想在dojo小部件中混合模板，与here中提到的方式相同，但无法混合使用多个模板。为了实现这一点，我尝试使用lang.mixin混合使用模板化的字符串（要混合的模板）构建的dom，但这没有用，因为它不会混合附加点和附加事件。请在单个小部件中建议是否有其他方式混合使用两个模板。

实际情况：我必须混合模板以获取列表容器和窗口小部件中的列表项。

Answer 1

您还可以使用Dojo / HTML编写一些Html。它与DomConstruct类似，对于长Html更容易，因为您可以直接将元素属性写入一个简单变量。

require(["dojo/html", "dojo/dom", "dojo/on", "dijit/form/NumberTextBox","dojo/domReady!"], 
function(html, dom, on){
    on(dom.byId("setContent"), "click", function(){
        html.set(dom.byId("content"), '<div class="myClass">'
            + '<ul id="myId">'
                + '<li> li 1 </li>'
                + '<li> li 2 </li>'
                + '<li> li 3 </li>'
            + '</ul>'
            + '<input type="inputText" />'
        + '</div>',
      {
        parseContent: true
      });
  });
});

http://dojotoolkit.org/reference-guide/1.10/dojo/html.html

Answer 2

在Dojo中，每个小部件使用_TemplatedMixin为1：1模板。单个小部件不能有多个模板。

您尝试做的事情是在列表容器小部件中有一个列表项小部件。你想要两个小部件，而不是一个！

MyListWidget.html：

<ul></ul>

MyListItemWidget.html：

<li>${itemContent}</li>

Dojo 1.7+：

define("MyListItemWidget", [
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyListItemWidget.html"
], function(declare, _WidgetBase, _TemplatedMixin, template) {
  return declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    postCreate: function() {
      // Do your thing.
    }
  });
});

define("MyListWidget", [
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyListWidget.html",
"MyListItemWidget"
], function(declare, _WidgetBase, _TemplatedMixin, template, MyListItemWidget) {
  return declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    postCreate: function() {
      new ListItemWidget({itemContent:"Hello"}).placeAt(this.domNode);
      new ListItemWidget({itemContent:"World"}).placeAt(this.domNode);
    }
  });
});

require(["MyListWidget", "dojo/domReady!"], function(MyListWidget) {
  new MyListWidget().placeAt('wherever');
});

在dojo小部件中混合多个模板

2 个答案: