CODEWITHSUNDEEP
behaviorpolymer-1.0
Rancid
Rancid

Reputation: 159

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

In polymer 1.0 I have a behavior script that defines properties and methods:

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

and a components that uses the behavior:

<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>

When I change the data property the method that was executed is from my-module, so it make "custom stuff". If I remove the dataChanged method in my-module it execute "default stuff".

How can I execute both the default behavior's method and the component's method?

If it is possible I don't want to copy the code from "dataBehavior.dataChanged" to "my-module.dataChanged". I'd like to call the behavior's method inside the component's method; can I use something like "super" to refer the behavior script?

Thank you very much for the answers!

Upvotes: 2

Views: 2796

Answers (3)

rkusa
rkusa

Reputation: 4902

You could also simply call 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>

Upvotes: 6

Rancid
Rancid

Reputation: 159

Thank you very much @Ben for the answer, that is a good solution to solve the problem.

A new idea from your solution is that I could choose to completely override the default method or use it where I want, in this way:

<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>

Using the standard "dataChanged" method that calls the "superDataChanged" method the component will be:

<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>

In this way I could choose what to do with the "default stuff".

Upvotes: 1

Ben Thomas
Ben Thomas

Reputation: 3200

I don't think this is possible. The only solution I have is that you set up an observer that calls a "super" function that executes and then calls another function which is "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>

Your element(s) can then implement this abstract method to do specific things:

<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>

When this is run, you will see the following output:

default stuff
custom stuff

Watch this video from the Polycasts series that explains how to create and implement behaviors. It also covers abstract methods.

I've set up a Plunker here. When you click the 'click me' text, this triggers a function which changes the array value so that the observer function is called.

Upvotes: 3

Related Questions