如何在不更改集合的情况下强制 Polymer 重新渲染 table

Question

我想在 Polymer 2.0 中重新渲染绑定到任何数组的 table，尽管该数组中没有进行任何更改。

<template is="dom-repeat" items="[[records.user.Stmt]]">
  <tr>
    <td>[[getDate(item)]]</td>
    <td>[[getAccountCurrency(item)]]</td>
    <td style="text-align:right">[[getValueBalance(item)]]</td>
  </tr>
</template>

在屏幕上，从下拉列表中，我 select 货币，例如美元，然后 getValueBalance(item) 应该根据已经存储在 records.user.Stmt[=27= 中的 selected 货币带来余额]数组

getValueBalance(item) { return item.Bal[this.selectedCurrency].amount; }

如果我更改数组中记录的顺序，table 会在 selected 货币时正确刷新，如下所示：

var tmp = this.records.user.Stmt.slice(); this.splice('records.user.Stmt',0,tmp.length); for (var i = tmp.length-1; i >=0 ; i--) { this.push('records.user.Stmt',tmp[i]); }

但是，如果我不更改记录顺序并按与拼接之前相同的顺序推送它们，则 table 不会刷新。

有什么方法可以强制 table 根据 selected 货币呈现内容。

Answer 1

基于 this answer，如果您想根据货币更改项目的显示方式，您应该明确指定 currency 作为模型绑定函数中的依赖项。下面是工作示例：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">

<dom-module id="poltest-app">
  <template>

    <paper-listbox selected="{{currency}}" attr-for-selected="value">
      <paper-item value="EUR">EUR</paper-item>
      <paper-item value="USD">USD</paper-item>
    </paper-listbox>

    <table>
      <template is="dom-repeat" items="[[records.user.Stmt]]">
        <tr>
          <td>[[getDate(item)]]</td>
          <td>[[getAccountCurrency(item, currency)]]</td>
          <td style="text-align:right">[[getValueBalance(item, currency)]]</td>
        </tr>
      </template>
    </table>
  </template>

  <script>
    /** @polymerElement */
    class PoltestApp extends Polymer.Element {
      static get is() { return 'poltest-app'; }
      static get properties() {
        return {
          records: {
            type: Object
          },
          currency: {
            type: String,
            value: "USD"
          }
        };
      }

      connectedCallback() {
        super.connectedCallback();
        this.records = {
          user: {
            Stmt: [
              {
                date: new Date(),
                currency: 1,
                balance: {
                  EUR: 1.00,
                  USD: 2.00
                }
              },
              {
                date: new Date(),
                currency: 0,
                balance: {
                  EUR: 4.00,
                  USD: 5.00
                }
              }
            ]
          }
        }
      }

      getDate(item) {
        return new Date();
      }

      getAccountCurrency(item, currency) {
        return currency;
      }

      getValueBalance(item, currency) {
        return item.balance[currency];
      }
    }

    window.customElements.define(PoltestApp.is, PoltestApp);
  </script>
</dom-module>

如何在不更改集合的情况下强制 Polymer 重新渲染 table

How to force Polymer to re render table without any change in collection

polymer

polymer-2.x