如何强制Polymer在不更改集合的情况下重新渲染表
我想在polymer 2.0中重新渲染绑定到任何数组的表,尽管该数组中没有做任何更改如何强制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
<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):