侦听器方法中聚合物属性未知

Question

最近遇到了以下问题：

在我基于 Polymer 的项目中，我有一个自定义元素，我们称它为 <test-element>。此元素作为 px-rangepicker 的依赖项，基本上只是一个日期选择器。如果您 select 来自该选择器的日期，则会触发事件 px-datetime-range-submitted。在我的 test-element 中，我有一个监听器：

Polymer({
    is: 'test-element',
    properties: {
      test: {
          type: String,
          value: "foobar"
      }
    },
    listeners: {
      'px-datetime-range-submitted': '_onDateRangeChanged'
    },
    _onDateRangeChanged: function(changeEvent) {
      console.log(this.test);
    }
});

现在，当我进入站点并首次加载 test-element 时，会调用 _onDateRangeChanged 方法。到目前为止一切正常。但：控制台只是说 undefined。无法从该方法内部访问属性。奇怪的是：

console.log(Polymer.dom(this));

将按预期给我一个完整的 DomApi 输出，我的属性作为节点：

▼ DomApi {node: test-element}
  ▼ node:test-element.iron-selected
    ► $: Object
      test: "foobar"

我无法帮助发生这种情况 - 非常感谢任何帮助或信息。

谢谢。

更新：

参见 the code at GitHub and a working example here（px-datetime-range-submitted 事件被调用 5 次，控制台输出为 undefined）。

Answer 1

您好，您好，问题不在于您的代码或日期选择器的代码。这就是聚合物的工作原理。
为什么会这样？
px-rangepicker implements a behavior called px-datetime-range-behavior 里面有一个观察者 _notifyRangeChanged(range.*) ，它被范围属性的变化触发，这个观察者也会触发 px-datetime-range-submitted 事件。这个属性有一个默认值，这意味着它的值在组件创建时被填充并触发观察者。这似乎是在你自己的组件的属性被初始化之前完成的，然后它仍然是未定义的。但在那之后，当你打开选择器并选择另一个日期时，它再次被触发，然后测试属性被 foobar.
填充为防止发生任何不良情况，只需检查是否设置了测试值。

_onDateRangeChanged: function(changeEvent) {
  if(this.test !== undefined) {
       console.log(this.test);
  }
}

侦听器方法中聚合物属性未知

Polymer properties are not known in listener method

polymer

listener

polymer-1.0

web-component