Как указать пользовательский шаблон рендеринга для параметров в теге {{selectmenu}} - PullRequest
Новая
       32

Как указать пользовательский шаблон рендеринга для параметров в теге {{selectmenu}}

0 голосов
/ 30 ноября 2018

Я ищу пример, в котором я могу указать шаблон для параметров рендеринга, чтобы я мог отобразить параметр как две части: диапазон с цветом фона и значением.

Сходство с этим https://jqueryui.com/selectmenu/#custom_render

это поддерживается в реализации тега jsviews?

Большое спасибо.

1 Ответ

0 голосов
/ 30 ноября 2018

Возможно, есть и другие подходы, в том числе создание собственного настраиваемого тега - без использования jQuery UI или создание производной версии элемента управления тегом {{selectmenu}} здесь , {{myselectmenu}} (с использованием 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 );
      };
    }
});
...