Polymer：观察声明属性中的路径变化和深度路径观察

Question

我在 Chrome (v45) 中使用 polymer (v1.1.5) 和 webcomponentsjs (v0.7.14)。

除非我遗漏了什么，否则 "Declared properties" 部分“Observing path changes" and "Deep path observation”下提供的 Polymer 代码示例似乎无法正常工作。

观察路径变化

Polymer({
  is: 'x-custom',
  properties: {
    user: Object
  },
  observers: [
    'userManagerChanged(user.manager)'
  ],
  userManagerChanged: function(user) {
    console.log('new manager name is ' + user.name);
  }
});

这是结果：

document.querySelector('x-custom').user // -> 'undefined'

我尝试以不同的方式初始化它：

Polymer({
  is: 'x-custom',
  properties: {
    user: {
      type: Object,
      value: function () {
        return {};
      }
    }
  },
  observers: [
    'userManagerChanged(user.manager)'
  ],
  userManagerChanged: function(user) {
    console.log('new manager name is ' + user.name);
  }
});

现在：

// -> Uncaught TypeError: Cannot read property 'name' of undefined

甚至像这样：

Polymer({
  is: 'x-custom',
  properties: {
    user: {
      type: Object,
      value: function () {
        return {manager: 'John'};
      }
    }
  },
  observers: [
    'userManagerChanged(user.manager)'
  ],
  userManagerChanged: function(user) {
    console.log('new manager name is ' + user.name);
  }
});

结果：

// -> new manager name is undefined
document.querySelector('x-custom').user.manager // -> "John"
document.querySelector('x-custom').user.manager = 'Paul' // -> "Paul"
// document.querySelector('x-custom').user.manager // -> "Paul"
// The property value has been updated, but the change has not been observed and no callback has been called

"Deep path observation".

中的代码示例也是如此

有谁知道如何解决这个问题并使其正常工作？谢谢！

Answer 1

您需要在更改路径值时使用 this.set 或 this.notifyPath 以便通知观察者。请阅读以下内容了解更多详情。

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#set-path

下面的jsbin演示对象路径的观察者：

http://jsbin.com/qupoja/4/edit?html,output

对于您的情况，以下可能有效

document.querySelector('x-custom').set('user.manager','Paul')

除此之外，正如我在评论中提到的，您必须修改用户管理器观察器以接受字符串作为参数而不是用户对象。

userManagerChanged: function(managerName) {
  console.log('new manager name is ' + managerName);
}

Polymer：观察声明属性中的路径变化和深度路径观察

Polymer: observing path changes and deep path observation in declared properties

html

javascript

web-component

polymer

观察路径变化