1

添加 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>
4

2 回答 2

1

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

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，而不是错误。它不能是一个小部件。也许你应该尝试一些其他的方法。

更新： 在自定义小部件中添加一些 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
    });
});
于 2012-10-24T04:04:53.190 回答
0 
define([
//...
    "dijit/_WidgetBase"

然后

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

然后

var yourWidget= new YourWidget({},'YourWidgetNodeId');
于 2012-10-24T03:46:01.893 回答