Dojo:继承/扩展模板化小部件:如何？

Question

我创建了一个名为"Dialog"的模板化基本窗口小部件,我想将其用作包中所有其他内容的核心布局窗口小部件.它是一个带有几个连接点的简单容器.(我没有包含HTML,因为它非常简单)

define("my/Dialog",[
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/ready",
"dojo/parser",
"dojo/text!./Dialog.html"], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, ready, parser, template){

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

    templateString: template,
    widgetsInTemplate: true,

    title: 'Dialog',        
    content: null,

    constructor: function(args){
    },

    postCreate: function(){
        this.inherited(arguments);
    },


    ///
    /// Getters / Setters
    ///

    _setTitleAttr: function(title){
    },

    _setContentAttr: function(content){
        this._contentPane.innerHTML = content;
    }       
});

ready(function(){
    parser.parse();
});});

然后我想创建另一个将从这个继承的模板化对话框,并且基本上将它扩展为将模板注入到my/Dialog的内容中.

define("my/BookmarksDialog",[
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/ready",
"dojo/parser",
"my/Dialog"], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, ready, parser, Dialog){

return declare([Dialog, _WidgetsInTemplateMixin], {

    //templateString: template,

   template: '<div data-dojo-attach-point="bookmarkpoint">something</div>',

    widgetsInTemplate: true,
    content: template, // This works but doesn't parse the widgets within
    title: 'Bookmarks',

    constructor: function(args){
    },


    postCreate: function(){ 
        this.inherited(arguments);  
    }

});

ready(function(){
    parser.parse();
});});

我面临的问题是BookmarkDialog无法访问名为bookmarkpoint的附加点

所以问题是:如何解析BookmarkDialog模板并将其放在Dialog小部件中？

选项:

1. 将Dialog小部件的模板复制到BookmarkWidget实际上不是一个选项,
2. 在BookmarkWidget模板中实例化对话框也不是一个选项,因为我不希望Dialog在附加点下.我必须将Dialog的所有方法包装到BookmarkDialog中才能正确传播.

请注意,我还在实例化窗口小部件时触发.startup().谢谢

Answer 1

使用为此目的而设计的buildRendering方法。在此方法中，您可以解析templateString属性，修改它，然后重新分配它。

buildRendering: function () {
    // Parse template string into xml document using "dojox/xml/parser"
    var xml = xmlParser.parse(this.templateString);
    var xmlDoc = xml.documentElement;

        // Find target node which should be modified
        var targetNode = query("div[data-dojo-attach-point='targetNode']", xmlDoc)[0];

    // Create new template content using createElement, createAttribute,  
        // setAttributeNode
        var newNode = xml.createElement("button");

    // Append content to the xml template
    targetNode.appendChild(newNode);

    // Re-set the modified template string
    this.templateString = xmlParser.innerXML(xmlDoc);

    this.inherited(arguments);
}