API 中的 Vaadin 元素 vaadin-grid 自定义渲染器 2+

Question

我几乎完成了几个基于 vaadin 元素的项目的移植 vaadin-grid 从 API 1.x 到最新版本，但我没有找到有关如何将自定义渲染器分配给列的示例或文档。

例如 main.js 我不知道如何移植 API 2+ 以下内容：

  grid.columns[2].renderer = function (cell) {
    cell.element.innerHTML = '';
    var progressBar = document.createElement('progress');
    progressBar.setAttribute('value', ((statuses.indexOf(cell.data) + 1) / statuses.length).toString());
    cell.element.appendChild(progressBar);
  };

这里的具体问题是在API 2+ columns中是undefined

是否可以将自定义渲染行为分配给 vaadin-grid-column？

注意：这个问题不是关于 vaadin framework 而是关于 vaadin elements

寻找某些东西的调试会话可能会有所帮助，例如 TemplateRenderer 或类似的东西，但直到现在我什么也没找到：

Answer 1

JS API 从 v1 到 v2 发生了重大变化，不再有 columns 对象。相反，如果要使用 JS 配置列，则需要直接修改 <vaadin-grid-column> 元素的属性（需要有 DOM 引用）。

具体对于渲染器，您在列模板中使用常规 HTML，如 the migration guide 中所述（Wiki 由于某种原因关闭，我刚刚重新打开它）。

对于您的特定代码示例，它将转换为：

<vaadin-grid>
  <vaadin-grid-column>
    <template>
     <progress value="[[item.value]]"></progress>
    </template>
  </vaadin-grid-column>
</vaadin-grid>

将 item.value 替换为数据对象中正确的属性（如果您需要在将数据传递到 [=14= 之前以某种方式转换数据，则使用计算的属性 ]元素。

奖金：

您是否考虑过使用 <vaadin-progress-bar> ;)

Valo 主题演示：https://cdn.vaadin.com/vaadin-valo-theme/2.0.0-alpha4/demo/progress-bars.html

API 中的 Vaadin 元素 vaadin-grid 自定义渲染器 2+

Vaadin elements vaadin-grid custom renderer in API 2+

javascript

vaadin

vaadin-grid

vaadin-elements

polymer-2.x