我有一个有点复杂的属性,我想在 Polymer 中观察。
该属性包含嵌套 数组,这些数组似乎不支持使用observers
进行观察,因为它们似乎只能在只有 1 层嵌套的情况下干净地工作(即 Prop 中只有一个数组)。
举个例子:
Polymer({
is: 'house-component',
properties: {
house: {
type: Object,
value: {
parents: [
{
name: "BigFoo",
children: [
{ name: "SmallFoo", age: 12 },
{ name: "SmallBaz", age: 15 },
{ name: "SmallSid", age: 17 }
]
},
{
name: "BigBaz",
children: [
{ name: "SmallIda", age: 11 },
{ name: "SmallTed", age: 18 },
{ name: "SmallMoe", age: 16 }
]
}
]
}
}
}
我将如何专门监控以下操作(仅示例):
- 任何 child 的年龄变化。
- 为任何 parent 增加/移除 child 。
理想情况下,我可以按照这些思路做一些事情:
observers: [
"_childAgeChanged(house.parents.*.children.*.age)",
"_childrenChanged(house.parents.*.children)"
],
这是我目前使用的:
observers: [
"_childrenChanged(house.parents.*)" // basically observes almost everything
],
这也为我提供了对 parent 的所有改变。
为了解决我目前使用的问题,我在 changeRecord
的 path
上做了很多字符串匹配,以查看实际更改了哪个路径以及如何更改,但它看起来绝对可怕。
有没有更好的方法来解决这个问题而不改变我正在使用的数据结构?
最佳答案
这里没有 Elixir ,通配符只能用在路径的末尾,所以最好的办法就是你正在做的事情——指定 house.parents.*
和过滤在路径
上。
我敢肯定还有其他方法可以做到这一点,但如果您在观察者中使用一对正则表达式也不会太糟糕:
var splicesRe = /house\.parents\.([^.]*)\.children\.splices/
var ageRe = /house\.parents\.([^.]*)\.children\.([^.]*)\.age/
var match;
match = change.path.match(splicesRe);
if (match) {
var parentKey = match[1];
childrenChanged(parentKey, change);
}
else {
match = change.path.match(ageRe);
if (match) {
var parentKey = match[1];
var childKey = match[2];
var newAge = change.value;
childAgeChanged(parentKey, childKey, change.value);
}
}
(可以更紧凑;我添加了命名变量来阐明匹配组的内容。)
关于javascript - Polymer 中的嵌套数组观察,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36258350/