如何将自定义标签包裹在 {^{datepicker /}} 周围并传递所有道具

问题描述

我想创建一个包含日期选择器控件的自定义标记。如何将自定义标记中的所有属性传递给日期选择器控件？

自定义标签应如下所示：

{^{mycustomdatepicker 
            aDate
            label="Date"
            dataFormat="yy-mm-dd" 
            dateFormat="dd.mm.yy"
            _showOn="button"
            _buttonImageOnly= true
            _buttonText= "Choose middle date"
 /}}

像这样的自定义标签的模板

<div>Caption: ~tagCtx.props.label</div>
{^{datepicker /}}

如何将所有道具一次性传递给日期选择器控件？

注意：我知道，我可以单独传递每个道具，例如：

{^{datepicker dateFormat= ~tagCtx.props.dateFormat _showOn=~tagCtx.props._showOn ... /}}

解决方法

看起来您需要的是从 {{datepicker}} 标记派生自定义标记：

mycustomdatepicker: {
    baseTag: "datepicker",...

参见 Specifying tag inheritance: the baseTag option 和 Custom datepicker tags。

然后，在您的派生标签上，您可以通过覆盖默认模板添加额外的 UI：

mycustomdatepicker: {
    baseTag: "datepicker",template: "<div>Caption: {^{:~tagCtx.props.label}}</div>"
    + "{^{include tmpl=#content/}}..."
}

参见 Rendering wrapped block content 和 this sample。

通过遵循该模式，您无需将 props 和参数传递给包装的 {{datapicker}}。 {^{include tmpl=#content/}} 将像原始日期选择器一样呈现，但可以在之前和之后呈现额外的内容...

也可以对派生标签使用渲染方法，而不是覆盖模板，如下所示：

mycustomdatepicker: {
    baseTag: "datepicker",render: function(date) {
        return "<div>Caption: " + this.tagCtx.props.label + "</div>"
        + this.tagCtx.render(date) + "...";
    }
}

见this sample