在道场小部件中混合多个模板

Mixin more than one template in a dojo widget

本文关键字：混合 小部      更新时间：2023-09-26

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

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

你也可以使用 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

在 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');
});
相关文章：