时间戳

首页 > 解决方案 > 如何为 {{selectmenu}} 标签中的选项指定自定义渲染模板

jsviews - 如何为 {{selectmenu}} 标签中的选项指定自定义渲染模板

问题描述

我正在寻找一个可以为渲染选项指定模板的示例，以便我可以将选项渲染为两部分：具有背景颜色和值的跨度。

类似于此https://jqueryui.com/selectmenu/#custom_render

这在 jsviews 标签实现中是否支持？

非常感谢。

标签： jsviewsjquery-ui-selectmenu

解决方案

可能还有其他方法，包括制作您自己的自定义标签 - 不使用 jQuery UI，或在此处{{selectmenu}}创建标签控件的派生版本（使用baseTag）。{{myselectmenu}}

但这里有一个快速的建议，你可以做到这一点：

{^{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 );
      };
    }
});

推荐阅读