在 dojo 小部件中混入多个模板答案

【问题标题】：Mixin more than one template in a dojo widget在 dojo 小部件中混入多个模板
【发布时间】：2015-02-18 20:41:08
【问题描述】：

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

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

【问题讨论】：

定义“混合两个模板”——例如，您希望模板如何组合？您能否举例说明您的尝试，和/或 2 个模板的外观与您期望的最终结果的示例？
听起来你对什么是 mixin 有一个根本性的误解。简单来说，就是将两个 Javascript 对象的变量组合在一起。 lang.mixin({a:'a'},{b:'b',c:'c'}) 返回 {a:'a',b:'b',c:'c'} ... 它不适用于字符串。

标签： javascript templates dojo

【解决方案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

【讨论】：

【解决方案2】：

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

听起来你想要做的是在列表容器小部件内部有一个列表项小部件。您需要两个小部件，而不是一个！

MyListWidget.html：

<ul></ul>

MyListItemWidget.html：

<li>${itemContent}</li>

道场 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/dom-construct 的 toDom 方法从 HTML 字符串创建节点。
我试过了，正如我之前解释的那样，它的附加点和附加事件丢失了。
您可以尝试在小部件的构造函数中将两个模板字符串组合在一起，然后将结果设置为模板字符串。此外，也许使用 dojox/dtl/_Templated 而不是 dijit/_TemplatedMixin 会更好地满足您的需求。我不确定你到底想要完成什么。