Миграция полимерных элементов Vaadin-Grid из модуля рендеринга ячеек

В Polymer 1.0 и Vaadin-grid v1 я использовал средство визуализации ячеек в следующих строках, чтобы добавить значок на основе значения данных:

grid.columns[6].renderer = function(cell) {
      if (cell.data < 0){
        cell.element.innerHTML =  Math.abs(cell.data) + '<iron-icon icon="arrow-downward" style="color: red"/>';
      }
      else if (cell.data > 0) {
        cell.element.innerHTML = cell.data + '<iron-icon icon="arrow-upward" style="color: green"/>';
      }
      else {cell.element.innerHTML = '<iron-icon icon="settings-ethernet" style="color: #ffcc00"/>';}
    };

Конечно, переход на vaadin-grid 2 означает отсутствие функции рендеринга и рекомендацию использовать вместо нее шаблоны. Каков будет наиболее эффективный способ добиться этого?

Приветствуется любая помощь - я как бы изучаю этот материал по мере продвижения, и примеры на сайте vaadin предполагают немного больше опыта, чем у меня есть!


element polymer vaadin-grid
person Riposte    schedule 01.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Томи Виркки на форуме Vaadin был достаточно любезен, чтобы опубликовать мне простой пример с использованием вычисляемых привязок. Кажется очевидным, теперь это было объяснено ... нужно как-то учиться, я думаю! Спасибо, Томи.

 <vaadin-grid items="[[users.result]]">

    <vaadin-grid-column width="50px" flex-grow="0">
      <template class="header">#</template>
      <template>
        <iron-icon icon="[[_itemIcon(item)]]" style$="[[_itemIconStyles(item)]]"/>
      </template>
    </vaadin-grid-column>

    <vaadin-grid-column>
      <template class="header">First Name</template>
      <template>[[item.firstName]]</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
      <template class="header">Last Name</template>
      <template>[[item.lastName]]</template>
    </vaadin-grid-column>

  </vaadin-grid>


</template>
<script>
  window.addEventListener('WebComponentsReady', () => {
    class XGrid extends Polymer.Element {

      static get is() {
        return 'x-grid';
      }

      _itemIcon(item) {
        return item.firstName > 'N' ? 'arrow-upward' : 'arrow-downward';
      }

      _itemIconStyles(item) {
        return `color: ${item.firstName > 'N' ? 'green' : 'red'}`;
      }

    }
    customElements.define('x-grid', XGrid);
person Riposte    schedule 19.04.2018
comment
Не могли бы вы объяснить это немного подробнее, пожалуйста? Нравятся подробности того, как проходит конвертация, я тоже этим занимаюсь, спасибо! - person Harvey Lin; 17.04.2019