Question

在聚合物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>

当我更改数据属性时，执行的方法来自my-module，因此它会生成＆＃34;自定义内容＆＃34;。如果我在my-module中删除了dataChanged方法，它会执行＆＃34;默认的东西＆＃34;。

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

如果可能，我不想复制来自＆＃34; dataBehavior.dataChanged＆＃34;的代码。 to＆＃34; my-module.dataChanged＆＃34;。我想在组件的方法中调用行为方法;我可以使用＆＃34; super＆＃34;引用行为脚本？

非常感谢您的回答！

Answer 1

您也可以致电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>

Answer 2

我不认为这是可能的。我唯一的解决方案是你设置一个观察者，调用一个“超级”函数执行，然后调用另一个“抽象”的函数：

<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。单击“单击我”文本时，会触发一个更改数组值的函数，以便调用observer函数。

Answer 3

非常感谢@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>

通过这种方式，我可以选择如何处理“默认内容”。

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

3 个答案: