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 /的内容中进行扩展。对话

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小部件中？

选项：

将Dialog小部件的模板复制到BookmarkWidget中不是一个选择，
在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);
}

Answer 2

谢谢你，因为我看到我试图在错误的地方“postMixInProperties”做魔术！这实际上使我得到了非常相似的解决方案，那就是简单地用增强小部件的模板字符串替换基本小部件的模板字符串变量。

考虑这个基本小部件的模板字符串。请注意{0}。

<div class="dialog" data-dojo-attach-event="onkeyup:_keyUp" >
<div data-dojo-attach-point="_wrapper" tabindex="1" role="button">
    <div data-dojo-attach-point="pendingPane"></div>
    <div class="inner commonBackground unselectable">
        <span class="hideButton" data-dojo-attach-point="closebtn" data-dojo-attach-event="onclick:close" aria-hidden="true" data-icon="&#xe00f;"></span>
        <div class="header" style="cursor: default;" data-dojo-attach-point="_titlePane"></div>
        <div data-dojo-attach-point="_contentPane" class="contentPane">{0}</div>
    </div>
</div>

然后是增强小部件的模板字符串

<div class="bookmarks">
    <div data-dojo-attach-point="bookmarkpoint">
        test attach point
    </div>
</div>

然后在增强小部件的“buildRendering”中，我使用了以下

return declare([Dialog], {      
    title: 'Bookmarks',

    constructor: function(args){
    },

    buildRendering: function(){
        this.templateString = lang.replace(this.templateString, [template]);
        this.inherited(arguments);
    },

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

其中“template”变量来自其中一个

"dojo/text!./BookmarksDialog.html",

也许在dojo中有一种更简单，更开箱即用的方式如何实现上述功能，但这对我来说很有用。希望有所帮助！

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

2 个答案: