javascript - 道场 : Inheriting/Extending templated widgets : How to?

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();
});});

然后我想创建另一个 templated 对话框，它将继承这个对话框，并且基本上会根据将模板注入(inject)到 my/的内容中来扩展它对话框

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 模板得到解析并放置在对话框小部件中？

选项:

1. 将 Dialog 小部件的模板复制到 BookmarkWidget 中不是一个真正的选择，
2. 在 BookmarkWidget 模板中实例化对话框也不是什么好选择，因为我不希望对话框位于附加点下。我得把所有的都包起来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);
}