dart聚合物数据绑定性能

我对将数据绑定到表的性能有问题。 我开始使用核心菜单和纸上项目。 纸张项目应该在单击时显示一个漂亮的动画。 它工作得很好，但是如果我尝试在选定的索引更改处理程序中绑定一些数据，动画帧速率会非常糟糕

我能做些什么来提高纸张的帧速率吗

下面是一个示例（在一个表中绑定250个单元格）

单击counter.html

核心菜单{
颜色：#01579b；
利润率：10px0；
}
核心菜单>纸张项目{
过渡：所有300毫秒的缓进缓出；
}
核心菜单>纸张项目。核心选定{
背景：#e1f5fe；
}
C1
C2
C3
补体第四成份
碳五
{{row.s1}}
{{row.s2）}
{{row.s3}}
{{row.s4}}
{{row.s5}}

点击计数器。省道

import'包装：polymer/polymer.dart'；
/**
*聚合物点击计数器元件。
*/
类表项{
字符串s1；
字符串s2；
字符串s3；
字符串s4；
字符串s5；
表项（this.s1、this.s2、this.s3、this.s4、this.s5）；
}
@CustomTag（'点击计数器'）
类ClickCounter扩展了聚合关系{
@已发布的var selIndex=0；
@可观察列表数据行=[]；
ClickCounter.created（）：super.created（）{
makeData（selfindex）；
}
selIndexChanged（var oldVal，var NEVAL）{
makeData（newVal）；
}
void makeData（int newVal）{
List newList=新列表（）；
对于（int r=0；r<50；r++）{
int i=newVal*r；
字符串s=“${i}”；
添加（新的TableItem（“${i}-1”、“${i}-2”、“${i}-3”、“${i}-4”、“${i}-5”）；
}
dataRows=toObservable（新列表）；
}
}

在冈特的提示后回答我的问题

1重新分配整个可观察列表

（如所述）-绝对是最慢的

2对可观察列表中的项目重新排序

改进，但仍不可接受

@observable List dataRows=toObservable（[]）；
void makeData（int newVal）{
List newList=新列表（）；
对于（int r=0；r<250；r++）{
int i=newVal*r；
字符串s=“${i}”；
添加（新的TableItem（“${i}-1”、“${i}-2”、“${i}-3”、“${i}-4”、“${i}-5”）；
}
dataRows.clear（）；
dataRows.addAll（newList）；
}

3对可观察列表中的项目进行重新排序，并进行一次性绑定

好多了，几乎可以接受

代码更改如上所述，一次绑定：

[[row.s1]]
[[row.s2]]
[[row.s3]]
[[row.s4]]
[[第5行]]

4无列表重新分配，可观察元素

绝对是最快的，即使有1000行也可以正常工作：）

类TableItemObs使用可观察对象扩展对象{
@可观测字符串s1；
@可观测字符串s2；
@可观测字符串s3；
@可观测字符串s4；
@可观测字符串s5；
表项OBS（此.s1、此.s2、此.s3、此.s4、此.s5）；
}
selIndexChanged（var oldVal，var NEVAL）{
changeData（newVal）；
}
void changeData（int newVal）{
对于（int r=0；r<250；r++）{
int i=newVal*r；
数据行[r].s1=“${i}-1”；
数据行[r].s2=“${i}-2”；
数据行[r].s3=“${i}-3”；
数据行[r].s4=“${i}-4”；
数据行[r].s5=“${i}-5”；
}
}

保持

{{row.s1}

更新： 我测试了另一个选项：

3a在可观察列表中重新对项目进行排序，具有一次性绑定和批处理

选项3的一个变体，但在清除列表后添加新项目时，会成批添加。 每个函数都会添加一部分项

比选项3快，但仍低于选项4

selIndexChanged（var oldVal，var newVal）{
新未来（（）=>makeData1（newVal））
.然后（（）=>makeData2（newVal））
.然后（（）=>makeData3（newVal））
.然后（（）=>makeData4（newVal））
。然后（（u）=>makeData5（newVal））；
}

是否有必要每次都重新创建整个表（

数据行

），而不是保留它，只修改

表项

中的值，或从

数据行

中添加或删除项？如果您将

{{row.s1}}

更改为

[[row.s1]]]

（一次性绑定-我自己还没有使用过它的经验），您可以尝试一下，如果有什么不同的话。感谢您提供的提示（我不知道一次性绑定），这两种方法都解决了问题。我将发布比较结果，以供将来参考。如果您希望在更改

TableItem

中的值时更新视图，则

TableItem

应添加

Observable

mixin，并且字段具有

@Observable

注释（当然，如果您使用一次性绑定，这没有帮助）。