0

似乎任何给定属性的更改事件处理程序都会触发，即使在第一次使用该属性的默认值以外的值初始化元素时也是如此。

例如，假设我有以下自定义 Polymer 元素。

<polymer-element name="some-thing" attributes="name">
    <script>
        Polymer({
            name: 'John Jacob Jingleheimer Schmidt',
            nameChanged: function (oldValue, newValue) {
                console.log('name changed from ' + oldValue + ' to ' + newValue);
            }
        });
    </script>
</polymer>

当我在我的标记中包含这个元素时，名称更改事件处理程序会立即触发，即使我在概念上不是“更改”值而是初始化它。

<some-thing name="Peter Peter Pumpkin Eater"></some-thing>

我只希望在外部代码修改元素名称属性的值时触发事件处理程序。有没有办法可以设置事件处理程序以这种方式运行？

4

3 回答 3

0

首先，请避免覆盖已有的属性名称，likename等title。这在不同的浏览器中带来了很多方面的问题。我将使用someName下面的属性名称。

一般来说，您是否在轻 DOM 中明确指定了一个属性：

<some-thing someName="Peter Peter Pumpkin Eater"></some-thing>

该事件将被触发，因为名称已更改。根据 name 是默认值这一事实，您可以有一些逻辑：

if (this.someName === 'John Jacob Jingleheimer Schmidt') {
  // we are on initials, let’s do nothing here
}

这就是要触发事件的原因。无论您是否仍想抑制触发这些在 light DOM 中指定的值的事件，您都可以使用以下解决方法：

<polymer-element name="some-thing" attributes="someName">
  <script>
    Polymer({
      someName: 'John Jacob Jingleheimer Schmidt',
      isDomReady: false, // will use this to prevent onSomeNameChanged
      someNameChanged: function (oldValue, newValue) {
        if(!this.isDomReady) return; // skip, we are not yet initialized
        console.log('name changed from ' + oldValue + ' to ' + newValue);
      },
      domReady: function() {
        this.isDomReady = true;
        this.async(function() { this.someName = 'Humpty Dumpty' });
      }
    });
  </script>
</polymer-element>
//⇒ name changed from Peter Peter Pumpkin Eater to Humpty Dumpty

实时预览：http ://plnkr.co/edit/uArV1FbZW7ONRzv5DN8f?p=preview

于 2015-02-25T08:15:47.483 回答
0

当 name 的值更改时，您可以使用 if 语句检查它是否具有值。

nameChanged: function () {
  if (this.name) {
    // only ran when there is a value
  }
}

或者就此而言，您可以检查 newValue。我从来没有试过这个。

 if (newValue) {
   // only ran when there is a value
 }

可能有更清洁的方法，但这对我有用。

编辑：还使用创建的函数来设置 name 的值可能会阻止它触发 2 次。尝试类似的东西。

  created: function () {
    this.name = this.name || "Peter Cottontail";
  }

再次编辑：将就绪函数更改为已创建函数。我认为 ready 函数仍然会导致值更改 2 次。

于 2015-02-20T16:34:58.287 回答
0

您应该检查 oldValue 的类型以忽略第一个分配：

Polymer({
  /* ... */
  nameChanged: function (oldValue, newValue) {
    if ('undefined' !== typeof oldValue) {
       // ...
    }
});
于 2015-02-20T17:05:16.783 回答