Question

我想用同一个共享观察者观察一些属性。比方说，我想跟踪修改历史。不幸的是，标准聚合物观察者回调according to the documentation有一个无艺术的原型：

myObserver: function(oldValue, newValue) {}

由于我想跟踪更改，我需要知道属性的名称已更改。通过对arguments的{{1}}进行逆向工程，我惊奇地发现，传递给函数的类型为myObserver的第三个参数。所以下面的代码^ W woodoo-magic就可以了：

Arguments[3]

保持理智并且渴望保持理智，我想知道我是否错过了更加和蔼可亲的方法来从观察者那里获得更改的属性名称。

@ebidel和@robdodson你能否对此有所了解？最新版本会支持

myObserver: function() {
  if (arguments.length > 2) { // observer called by polymer
    var args = arguments[2];
    var idx = args[1].length - 1; // sic! index of changed is stored in index 
    var prop = args[2][idx * 2 + 1][0];
    var val = args[0][idx];

    console.log("Property [" + prop + "] got new value: " + val);
  }
  ...
}

吗？有没有更好的方法来应对变化？

提前致谢。

Answer 1

我认为你正在寻找一种不同的机制。如果您确实接受采用不同的机制来实现您需要的功能，那么检查MutationObserver可能不会有什么坏处。我已经设法在this answer中使用该演示，并且可以轻松地将我的Chrome控制台记录为MutationObserver观察到的元素。

希望这有帮助！

Answer 2

因此，如果我理解正确，目标是使用单个观察者进行多个属性更改，并且在观察者内部，您需要能够确定更改的属性的名称。

我进行了一些实验，发现你可以通过深度子属性观察者实现这一点。

<!doctype html>
<html>
<head>
<meta name="description" content="http://stackoverflow.com/questions/28265025">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
</head>
<body>
  <dom-module id="x-el">
    <template>
      <p>path: {{path}}</p>
      <p>value: {{value}}</p>
      <button on-click="incrementNumber1">increment number 1</button>
      <button on-click="incrementNumber2">increment number 2</button>      
    </template>
    <script>
      Polymer({
        is: 'x-el',
        properties: {
          path: {
            type: String,
            notify: true
          },
          value: {
            type: String,
            notify: true
          },
          number1: {
            type: Number,
            value: 0,
            notify: true
          },
          number2: {
            type: Number,
            value: 0,
            notify: true
          },
        },
        observers: [
          'onChange(number1.*)',
          'onChange(number2.*)'
        ],
        incrementNumber1: function() {
          this.number1 += 1;
        },
        incrementNumber2: function() {
          this.number2 += 1;
        },        
        onChange: function(changeRecord) {
          this.path = changeRecord.path;
          this.value = changeRecord.value;
        }
      });
    </script>
  </dom-module>
  <x-el></x-el>
</body>
</html>

https://jsbin.com/pufexay/edit?html,output

Polymer共享观察者：获取原始属性

2 个答案: