5

我创建了一个名为“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 位于附加点下。我必须将 Dialog 的所有方法包装到 BookmarkDialog 中才能正确传播。

请注意，我也在实例化小部件时触发了.startup()。谢谢

4

2 回答 2

4

使用专门为此目的设计的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);
}
于 2013-06-25T08:29:27.940 回答
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();
    }, ...

其中“模板”变量来自要求之一

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

也许在dojo中有一种更简单且开箱即用的方式来实现上述目标，但这对我来说是诀窍。希望有帮助！

于 2013-06-25T09:40:54.623 回答