如何为{{selectmenu}}标签中的选项指定自定义渲染模板
How to specify custom rendering template for options in {{selectmenu}} tag
我正在寻找一个示例,我可以在其中指定呈现选项的模板,这样我就可以将一个选项呈现为两部分:带有背景颜色和值的跨度。
类似于此https://jqueryui.com/selectmenu/#custom_render
jsviews 标记实现是否支持此功能?
非常感谢。
可能还有其他方法,包括制作您自己的自定义标签 - 不使用 jQuery UI,或创建 {{selectmenu}}
标签控件的派生版本 here, {{myselectmenu}}
(using baseTag ).
但这里有一个快速建议,您可以这样做:
{^{selectmenu person name="person" onBind=~onbind}}
{^{for people}}
<option data-style="{{:style}}" value="{{:id}}">{{:name}}</option>
{{/for}}
{{/selectmenu}}
数据:
people: [
{name: "John Resig", id: "1", style: "background-image: url(...);"},
...
代码:
pageTmpl.link("#page", model, {
onbind: function(val) {
// override onBind for this tag control instance
this.baseApply(arguments);
// override _renderItem for this widget instance:
this.widget._renderItem = function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
};
}
});
我正在寻找一个示例,我可以在其中指定呈现选项的模板,这样我就可以将一个选项呈现为两部分:带有背景颜色和值的跨度。
类似于此https://jqueryui.com/selectmenu/#custom_render
jsviews 标记实现是否支持此功能?
非常感谢。
可能还有其他方法,包括制作您自己的自定义标签 - 不使用 jQuery UI,或创建 {{selectmenu}}
标签控件的派生版本 here, {{myselectmenu}}
(using baseTag ).
但这里有一个快速建议,您可以这样做:
{^{selectmenu person name="person" onBind=~onbind}}
{^{for people}}
<option data-style="{{:style}}" value="{{:id}}">{{:name}}</option>
{{/for}}
{{/selectmenu}}
数据:
people: [
{name: "John Resig", id: "1", style: "background-image: url(...);"},
...
代码:
pageTmpl.link("#page", model, {
onbind: function(val) {
// override onBind for this tag control instance
this.baseApply(arguments);
// override _renderItem for this widget instance:
this.widget._renderItem = function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
};
}
});