如何解决如何将自定义标签包裹在 {^{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) + "...";
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。