如何在 Polymer 1.0 中调用默认行为的方法？

Question

在 polymer 1.0 中，我有一个定义属性和方法的行为脚本：

<script>
dataBehavior = {
  properties: {
    data: {
      type: Array,
      value: null,
      observer: 'dataChanged'
    }
  },
  dataChanged: function(newValue, oldValue) {
    console.log('default stuff');
  }
};
</script>

和一个使用行为的组件：

<dom-module id="my-module">
  <template>
  </template>
  <script>
  Polymer({
    is: "my-module",
    behaviors: [dataBehavior],
    dataChanged: function(newValue, oldValue) {
      // How to call the dataChanged method from dataBehavior?
      // this.super.dataChanged(); <- don't works!
      console.log('custom stuff');
    }
  });
  </script>
</dom-module>

当我更改数据时属性执行的方法来自我的模块，所以它使 "custom stuff"。如果我删除我的模块中的 dataChanged 方法，它会执行 "default stuff".

如何同时执行默认行为的方法和组件的方法？

如果可能的话，我不想将代码从 "dataBehavior.dataChanged" 复制到 "my-module.dataChanged"。我想在组件的方法中调用行为的方法；我可以使用 "super" 之类的东西来引用行为脚本吗？

非常感谢您的回答！

Answer 1

我认为这是不可能的。我唯一的解决方案是你设置一个观察者调用一个 "super" 函数执行然后调用另一个函数 "abstract":

<script>
  dataBehavior = {
    properties: {
      data: {
        type: Array,
        value: null,
        observer: 'superDataChanged'
      }
    },
    superDataChanged: function(newValue, oldValue) {
      console.log('default stuff');
      this.abstractDataChanged(newValue, oldValue);
    },
    abstractDataChanged: function (newValue, oldValue) {
      // abstract
    }
  };
</script>

然后您的元素可以实现此抽象方法来执行特定操作：

<dom-module id="my-module">
  <template>
  </template>
  <script>
    Polymer({
      is: "my-module",
      behaviors: [dataBehavior],
      abstractDataChanged: function(newValue, oldValue) {
        console.log('custom stuff');
      }
    });
  </script>
</dom-module>

当这是运行时，您将看到以下输出：

default stuff
custom stuff

观看 Polycasts 系列中的这个 video，它解释了如何创建和实现行为。它还涵盖了抽象方法。

我设置了一个 Plunker here。当您单击 'click me' 文本时，这会触发一个更改数组值的函数，从而调用 observer 函数。

Answer 2

非常感谢@Ben的回答，很好的解决了问题。

你的解决方案的一个新想法是我可以选择完全覆盖默认方法或在我想要的地方使用它，这样：

<script>
  dataBehavior = {
    properties: {
      data: {
        type: Array,
        value: null,
        observer: 'dataChanged'
      }
    },
    dataChanged: function(newValue, oldValue) {
      this.superDataChanged(newValue, oldValue);
    },
    superDataChanged: function(newValue, oldValue) {
      console.log('default stuff');
    }
  };
</script>

使用调用 "superDataChanged" 方法的标准 "dataChanged" 方法，组件将是：

<dom-module id="my-module">
  <template>
  </template>
  <script>
    Polymer({
      is: "my-module",
      behaviors: [dataBehavior],
      dataChanged: function(newValue, oldValue) {

        // this line here to call the default method at the start:
        this.superDataChanged(newValue, oldValue);

        // ONLY this line to NOT execute the default method
        console.log('custom stuff');

        // this line here to call the default method at the end:
        this.superDataChanged(newValue, oldValue);

      }
    });
  </script>
</dom-module>

这样我就可以选择如何处理 "default stuff"。

Answer 3

您也可以直接调用 dataBehavior.dataChanged.call(this, newValue, oldValue):

<dom-module id="my-module">
  <template>
  </template>
  <script>
  Polymer({
    is: "my-module",
    behaviors: [dataBehavior],
    dataChanged: function(newValue, oldValue) {
      dataBehavior.dataChanged.call(this, newValue, oldValue)
    }
  });
  </script>
</dom-module>

如何在 Polymer 1.0 中调用默认行为的方法？

How to call the default behavior's method in Polymer 1.0?

behavior

polymer-1.0