Question

任何人都可以帮我在Dijit小部件上应用装饰器模式吗？

例如，给定FormA_Widget显示带有一些输入文本和按钮的表单。我们的想法是创建一个FormB_Widget，“扩展”FormA_Widget用更多单选按钮，输入等装饰它。

我知道如何创建模板化自定义窗口小部件以及如何“扩展”窗口小部件，我需要知道如何在{{1}内的某个位置“注入”FormB_Widget模板添加所需的“decoration2。

提前致谢。

Answer 1

查看我创建的示例：http://plnkr.co/edit/dGMJ8UBQ9dT3dGQPQSeu?p=preview

这是最简单的解决方案，但在FormA中需要进行一些微小的更改：

<强> FormA.js ：

var FormA = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {   
    templateString: template,

    templateExtensionString: "" // <= add `templateExtensionString` property
});

FormA.html - 将templateExtensionString占位符添加到小部件模板中：

<div>
    <div><!-- FormA markup --></div>

    <div>${!templateExtensionString}</div>

    <div><!-- FormA markup --></div>
</div>

N.B。：为防止_TemplatedMixin在字符串中转义引号，请放置“！”在完整的变量名之前。

现在您可以扩展FormA：

var FormB = declare([FormA], {

    templateExtensionString: template // FormB template (dojo/text!./FormB.html)

});

如果您无法修改FormA，请查看我对Dojo Dialog with confirmation button的回答，并考虑采用类似的策略。

Dojo小部件和装饰模式？

1 个答案: