代码之家 › 专栏 › 技术社区 › Riposte

从单元渲染器迁移Vaadin网格聚合物元素

vaadin-grid element polymer

1

Riposte · 技术社区 · 6 年前

在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网站上的示例假定比我有更多的专业知识!

1 回复 | 直到 6 年前

1

Riposte 6 年前

Vaadin论坛上的TomiVirkki好心地给我发了一个使用计算绑定的简单示例。很明显,现在已经解释清楚了。。我想我得学点什么!谢谢Tomi

 <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);