Vaadin-Grid 聚合物元素从单元格渲染器迁移
Vaadin-Grid Polymer Element migration from cell renderer
在 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 意味着不再有渲染器功能,建议使用模板 instead.What 将是实现此目的的最有效方法吗?
任何帮助表示赞赏 - 我正在学习这些东西,而 vaadin 网站上的示例比我拥有更多的专业知识!
Vaadin 论坛上的 Tomi Virkki 非常友好地 post 我一个使用计算 bindings.Seems 的简单示例,现在很明显,它已经被解释了..我想我必须以某种方式学习!谢谢托米
<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);
在 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 意味着不再有渲染器功能,建议使用模板 instead.What 将是实现此目的的最有效方法吗?
任何帮助表示赞赏 - 我正在学习这些东西,而 vaadin 网站上的示例比我拥有更多的专业知识!
Vaadin 论坛上的 Tomi Virkki 非常友好地 post 我一个使用计算 bindings.Seems 的简单示例,现在很明显,它已经被解释了..我想我必须以某种方式学习!谢谢托米
<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);