Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/unix/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何强制Polymer在不更改集合的情况下重新渲染表_Polymer_Polymer 2.x - Fatal编程技术网

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

如何强制Polymer在不更改集合的情况下重新渲染表,polymer,polymer-2.x,Polymer,Polymer 2.x,我想在polymer 2.0中重新渲染绑定到任何数组的表,尽管该数组中没有做任何更改 <template is="dom-repeat" items="[[records.user.Stmt]]"> <tr> <td>[[getDate(item)]]</td> <td>[[getAccountCurrency(item)]]</td> <td style="text-align:right

我想在polymer 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>
如果更改数组中记录的顺序,则在选择“货币”时,表将正确刷新,如下所示:

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]);
}
然而,若我不更改记录顺序,并按拼接之前的顺序推送它们,那个么表就不会刷新

是否有任何方法可以强制表基于选定的货币呈现内容。

基于,如果要更改项目基于货币的显示方式,则应在模型绑定函数中将
货币
明确指定为依赖项。以下是工作示例:

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

欧元
美元
[[getDate(项目)]]
[[getAccountCurrency(项目,货币)]]
[[getValueBalance(项目、货币)]]
/**聚合反应*/
类PoltestApp扩展了Polymer.Element{
静态get是(){return'poltest app';}
静态获取属性(){
返回{
记录:{
类型:对象
},
货币:{
类型:字符串,
价值:“美元”
}
};
}
connectedCallback(){
super.connectedCallback();
此项。记录={
用户:{
Stmt:[
{
日期:新日期(),
货币:1,
余额:{
欧元:1.00,
美元:2.00
}
},
{
日期:新日期(),
货币:0,
余额:{
欧元:4.00,
美元:5.00
}
}
]
}
}
}
获取日期(项目){
返回新日期();
}
getAccountCurrency(项目、货币){
返回货币;
}
getValueBalance(项目、货币){
返回项目。余额[货币];
}
}
window.customElements.define(PoltestApp.is,PoltestApp);
基于,如果要更改项目基于货币的显示方式,应在模型绑定函数中将
货币
明确指定为依赖项。以下是工作示例:

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

欧元
美元
[[getDate(项目)]]
[[getAccountCurrency(项目,货币)]]
[[getValueBalance(项目、货币)]]
/**聚合反应*/
类PoltestApp扩展了Polymer.Element{
静态get是(){return'poltest app';}
静态获取属性(){
返回{
记录:{
类型:对象
},
货币:{
类型:字符串,
价值:“美元”
}
};
}
connectedCallback(){
super.connectedCallback();
此项。记录={
用户:{
Stmt:[
{
日期:新日期(),
货币:1,
余额:{
欧元:1.00,
美元:2.00
}
},
{
日期:新日期(),
货币:0,
余额:{
欧元:4.00,
美元:5.00
}
}
]
}
}
}
获取日期(项目){
返回新日期();
}
getAccountCurrency(项目、货币){
返回货币;
}
getValueBalance(项目、货币){
返回项目。余额[货币];
}
}
window.customElements.define(PoltestApp.is,PoltestApp);
另一个具有计算属性和指定的
货币的工作示例(尽管这是Polymer 1.x):另一个具有计算属性和指定的
货币的工作示例(尽管这是Polymer 1.x):