Question

最近我遇到了以下问题：

在我的基于Polymer的项目中，我有一个自定义元素，我们称之为<test-element>。此元素为px-rangepicker作为依赖项，基本上只是一个日期选择器。如果您从该选择器中选择日期，则会触发事件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方法。到目前为止一切都还可以。但：控制台只是sais undefined。从该方法内部无法访问任何属性。奇怪的是：

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

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

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

我无法帮助实现这一点 - 任何帮助或信息都会受到高度赞赏。

谢谢。

更新：

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

Answer 1

嗨，在你给出的例子中，问题不是你的代码或datepicker的代码。这就是聚合物的工作原理为什么会这样？ px-rangepicker实现了一个名为px-datetime-range-behavior的行为，其中有一个观察者_notifyRangeChanged(range.*)，它由范围属性的更改触发，此观察者也会触发px-datetime-range-submitted事件。此属性具有默认值，这意味着它的值在组件创建时被填充，并且还会触发观察者。这似乎是在您自己的组件的属性初始化之前完成的，然后仍未定义。但在此之后，当您打开选择器并选择另一个日期时，它会再次触发，然后测试属性将填充foobar。
为了防止发生任何不良事件，只需检查是否设置了test值。

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

在侦听器方法中不知道聚合物属性

1 个答案: