Question

如何在以后使用mixins dijit/_TemplatedMixin和dijit/_WidgetsInTemplateMixin更改窗口小部件的模板（不在构造函数中）？

我的场景是小部件必须调用服务器来获取数据，然后回调函数将数据与模板文件合并，然后生成的模板应该用于templateString。小部件应该在此时更新其内容。

设置templateString并调用buildRendering（）无效。这是我的代码的简化版本：

define([
    "dojo/_base/declare", 
    "dojo/_base/lang",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    ],
function(declare, lang, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin) {
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        constructor: function(id) {
            this.id = id;
            this.templateString = "<div>Loading...</div>";
            //use xhr to call REST service to get data.
            //dataLoadedCallback is executed with response data
            ...
        },

        dataLoadedCallback : function(data) {
            this.destroyRendering();
            //render a templateString using the data response from the rest call
            this.templateString = "<div>Data is loaded. Name:" + data.name + "</div>"
            this.buildRendering();
        },
    });
});

Answer 1

你做不到这样的事情。模板仅在postCreate方法之前解析一次。

但是你可以做的事情很少：

创建一个非ui小部件，它将执行XHR调用。当这个非ui小部件获得XHR响应时，它会使用正确的templateString
或使用dojo/dom-construct。它包含一个toDom方法，可用于将字符串转换为节点。然后你可以将它附加到小部件注意：这不会解析任何data-dojo属性
您也可以直接将收到的templateString注入widget domNode：

dataLoadedCallback : function(data) { this.domNode.innerHTML = "<div>Data is loaded. Name:" + data.name + "</div>"; //you might be able to parse the content (if you have subwidgets) using dojo/parse },

最后但并非最不重要的，这是我为自己写的一个工具。它允许随时解析任何templateString（就像创建小部件时的dojo一样）

define([
	'dojo/dom-construct',
	'dojo/string',

	'dijit/_AttachMixin',
	'dijit/_TemplatedMixin'
], function(domConstruct, string,
		_AttachMixin, _TemplatedMixin) {

	// summary:
	//		provide an utility to parse a template a runtime (and create attach point, atach events, etc...)
	//		Copyright: Benjamin Santalucia

	var GET_ATTRIBUTE_FUNCTION = function(n, p) { return n.getAttribute(p); },
		_TemplateParserMixin = function() {};

	_TemplateParserMixin.prototype = {
		parseTemplate: function(template, data, container, position, transformer) {
			// summary:
			//		parse the template exactly as dojo will nativly do with a templateString
			if(this._attachPoints === undefined) {
				this._attachPoints = [];
			}
			if(this._attachEvents === undefined) {
				this._attachEvents = [];
			}

			var nodes,
				x,
				len,
				newTemplate = string.substitute(template, data, transformer),
				node = domConstruct.toDom(_TemplatedMixin.prototype._stringRepl.call(this, newTemplate));
			if(node.nodeName === '#document-fragment') {
				node = node.firstChild;
			}

			//parse all nodes and create attach points and attach events
			nodes = node.getElementsByTagName('*');
			len = nodes.length;
			for(x = -1; x < len; x++) {
				_AttachMixin.prototype._processTemplateNode.call(this, x < 0 ? node : nodes[x], GET_ATTRIBUTE_FUNCTION, _AttachMixin.prototype._attach);
			}

			if(container) {
				domConstruct.place(node, container, position);
			}

			return node;
		}
	};
	return _TemplateParserMixin;
});

用法是：

returnedNode = w.parseTemplate(newTemplateString, {
            templatePlaceHolderName: 'foo' //for teplate with placeholders like ${templatePlaceHolderName}
}, domNodeToInsertIn, 'only'); //last parameter is same as dojo/dom-construct::place() >> last, first, before, after, only

Dojo _TemplatedMixin：更改templateString

1 个答案: