1

WidgetsInTemplateMixinを追加した後、エラーが発生します

dest.appendChild is not a function

ドキュメントでは、this.containerNodeに子オブジェクトを含めることができない場合はエラーが発生すると記載されています。ただし、divのcontainerNode接続ポイントをdojoタイプ「dijit / layout/ContentPane」でマークしました。なぜこれが機能しないのか誰かが私に説明できますか？

これがテンプレートファイルです

<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ノードである必要があります。

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になるように設計されています。ウィジェットにすることはできません。多分あなたは他のいくつかの方法を試してみるべきです。

更新： カスタムウィジェットにいくつかのBorderContainerを追加します

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 に答える