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

在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"/>';}
    };

grid.columns[6]。渲染器=函数（单元格）{
if（cell.data<0）{
cell.element.innerHTML=Math.abs（cell.data）+''；
}
否则如果（cell.data>0）{
cell.element.innerHTML=cell.data+''；
}
else{cell.element.innerHTML=''；}
};

当然，迁移到vaadin grid 2意味着不再使用渲染器功能，也不建议使用模板。实现这一点的最有效方法是什么

---

感谢任何帮助-我在学习这些东西的过程中一直在学习，vaadin网站上的例子假设比我有更多的专业知识

Vaadin论坛上的Tomi Virkki好心地给我发了一个使用计算绑定的简单示例。现在已经解释清楚了。。我想我得学点什么！谢谢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);

#
名字
[[item.firstName]]
姓
[[item.lastName]]
window.addEventListener（'WebComponentsReady'，（）=>{
XGrid类扩展聚合物。元素{
静态get是（）{
返回“x-grid”；
}
_项目图标（项目）{
return item.firstName>'N'？'arrow up'：'arrow down'；
}
_项目组件（项目）{
返回'color:${item.firstName>'N'？'green'：'red'}`；
}
}
自定义元素。定义（'x-grid'，XGrid）；

您能再解释一下吗？就像转换过程的细节一样，我也在做，谢谢！