0

我想重新渲染绑定到任何数组的聚合物 2.0 中的表，尽管该数组中没有进行任何更改。

<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>

在屏幕上，从下拉列表中选择货币，例如 USD，然后getValueBalance(item)应根据已存储在records.user.Stmt数组中的所选货币带来余额

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

如果我更改数组中记录的顺序，选择货币时表格会正确刷新，如下所示：

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]);
}

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

有没有办法强制表格根据所选货币呈现内容。

4

1 回答 1

2

基于这个答案，如果您想根据货币更改项目的显示方式，您应该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>
于 2017-04-28T13:25:55.437 回答