javascript - Polymer 中的嵌套数组观察

Question

我有一个有点复杂的属性，我想在 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 上做了很多字符串匹配，以查看实际更改了哪个路径以及如何更改，但它看起来绝对可怕。

有没有更好的方法来解决这个问题而不改变我正在使用的数据结构？

Answer 1

这里没有 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);
    }
}

(可以更紧凑；我添加了命名变量来阐明匹配组的内容。)