dom-repeat 中的 Polymer 2 计算与嵌套函数的绑定

Question

我正在使用 vaadin-grid 动态创建 table（包括列数！），如下所示

<vaadin-grid id="grid" style="flex:1" items="[[tableData]]">  
    <template is="dom-repeat" items="[[tableColumns]]" as="column">
        <vaadin-grid-column>
            <template class="header">                                  
                [[column.header]]                                                                                                           
           </template>
            <template>
                <!--[[formatNumberForTable(get(column.value, item))]]--> ***
                [[get(column.value, item)]]
            </template>
        </vaadin-grid-column>
    </template>  
</vaadin-grid>

tableColumns 在运行时被填充并确定列数及其 headers。要动态确定要在各个列中显示 item 中的属性，建议我使用 get(column.value, item)，其中 column.value 会动态填充相应 [=27] 的名称=].这很好用。

问题是我也想格式化值。但是像 *** 标记的代码不起作用，它打印出源代码而不是值。

如何格式化我的值？

Answer 1

您的 HTML 代码中不能有回调函数。

<!--[[formatNumberForTable(get(column.value, item))]]--> ***

让 formatNumberForTable 调用自身内部的 get 方法。

[[formatNumberForTable(column.value, item)]]

formatNumberForTable: function(column.value, item) {
  var variable = this.get(column.value, item);

  // do something more with 'variable'

  return variable;
}

dom-repeat 中的 Polymer 2 计算与嵌套函数的绑定

Polymer 2 computed binding with nested functions in dom-repeat

polymer

vaadin-grid

polymer-2.x