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

Question

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!

Answer 1

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>

Answer 2

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.

Answer 3

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