Question

在WidgetsInTemplateMixin中添加后，我收到错误

dest.appendChild is not a function

在文档中，它声称如果this.containerNode不能包含任何子对象，则会出现错误。但是，我已经用dojo类型“dijit / layout / ContentPane”标记了div的containerNode附加点。任何人都可以向我解释为什么这不起作用？

这是模板文件

<div class="${baseClass}">
    <div class="${baseClass}Container"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design: 'headline'">
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'top'">
            Top
        </div>
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'center'"
             data-dojo-attach-point="containerNode">
        </div>
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'leading', splitter: true">
            Sidebar
        </div>
    </div>
</div>

这是javascript定义

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/TabContainer",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/MainContainer.html"
], function (declare,
             _WidgetBase,
             _OnDijitClickMixin,
             BorderContainer,
             ContentPane,
             TabContainer,
             _TemplatedMixin,
             _WidgetsInTemplateMixin,
             template)
{

    return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString:template,
        baseClass:"main"
    });

});

以声明方式定义的自定义窗口小部件

<div data-dojo-type="main/ui/MainContainer" data-dojo-props="title: 'Main Application'">
  Hello Center!
</div>

Answer 1

你的问题值得研究。 appendChild 方法仅适用于DOM Node。根据源代码，containerNode必须是DOM节点。

的dijit / _TemplatedMixin.js

 _fillContent: function(/*DomNode*/ source){
    // summary:
    // Relocate source contents to templated container node.
    // this.containerNode must be able to receive children, or exceptions will be thrown.
    // tags:
    // protected
    var dest = this.containerNode;
        if(source && dest){
            while(source.hasChildNodes()){
            dest.appendChild(source.firstChild);
        }
    }
},

看看这个dijit / _WidgetBase.js。注释显示 containerNode 的类型是 DomNode 。

// containerNode: [readonly] DomNode
//      Designates where children of the source DOM node will be placed.
//      "Children" in this case refers to both DOM nodes and widgets.
//      For example, for myWidget:
//
//      |   <div data-dojo-type=myWidget>
//      |       <b> here's a plain DOM node
//      |       <span data-dojo-type=subWidget>and a widget</span>
//      |       <i> and another plain DOM node </i>
//      |   </div>
//
//      containerNode would point to:
//
//      |       <b> here's a plain DOM node
//      |       <span data-dojo-type=subWidget>and a widget</span>
//      |       <i> and another plain DOM node </i>
//
//      In templated widgets, "containerNode" is set via a
//      data-dojo-attach-point assignment.
//
//      containerNode must be defined for any widget that accepts innerHTML
//      (like ContentPane or BorderContainer or even Button), and conversely
//      is null for widgets that don't, like TextBox.
containerNode: null,

因此， containerNode 已经被设计为 DomNode ，而不是bug。它不能是一个小部件。也许你应该尝试其他方式。

<强>更新在自定义小部件中添加一些BorderContainers

ModuleWithGuideBar.html

<div data-dojo-attach-point="containerNode" class="${class} ModuleWithGuideBar">
    <div class="ModuleGuideBar"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="region:'top', gutters:false"
         data-dojo-attach-point="guideBarFirst">
    </div>
    <div class="ModuleGuideBar"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="region:'top', gutters:false"
         data-dojo-attach-point="guideBarSecond">
    </div>
    <div class="ModuleContent"
         data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="region:'center', gutters:false, liveSplitters:false"
         data-dojo-attach-point="moduleContent">
    </div>
</div>

Js文件

define([
    "dojo/_base/declare",
    "dijit/layout/BorderContainer",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/ModuleWithGuideBar.html"

], function (declare, BorderContainer, TemplatedMixin, _WidgetsInTemplateMixin, template) {
    return declare("common.widget.ModuleWithGuideBar", [BorderContainer, TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString:template,
        region:"center",
        gutters:false,
        guideBarFirst:null,
        guideBarSecond:null,
        moduleContent:null
    });
});

Answer 2

define([
//...
    "dijit/_WidgetBase"

然后

return declare('YourWidget',[_WidgetBase , _TemplatedMixin, _WidgetsInTemplateMixin],{
     templatePath: 'local/to/your/template.html',
     widgetsInTemplate: true,
     //...

然后

var yourWidget= new YourWidget({},'YourWidgetNodeId');

Dojo 1.8：在渲染自定义模板时，获取dest.appendChild不是一个函数

2 个答案: