Comment appeler la méthode du comportement par défaut dans Polymer 1.0?

Question

En polymère 1,0 I ont un script de comportement qui définit les propriétés et méthodes:

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

et un des composants qui utilise le comportement:

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

Lorsque je modifie la propriété de données, le procédé qui a été exécuté est de my-module, donc ça fait "trucs personnalisés". Si je supprime la méthode dataChanged dans my-module, elle exécute "stuff par défaut". Comment puis-je exécuter la méthode du comportement par défaut et la méthode du composant?

Si c'est possible, je ne souhaite pas copier le code de "dataBehavior.dataChanged" vers "my-module.dataChanged". Je voudrais appeler la méthode du comportement à l'intérieur de la méthode du composant; puis-je utiliser quelque chose comme "super" pour renvoyer le script de comportement?

Merci beaucoup pour les réponses!

Answer 1

Vous pouvez aussi simplement appeler 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

Je ne pense pas que ce soit possible. La seule solution que j'ai est que vous mettre en place un observateur qui appelle une fonction « super » qui exécute et appelle une autre fonction qui est « abstraite »:

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

Votre élément (s) peut alors mettre en œuvre cette méthode abstraite de faire des choses spécifiques:

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

Lorsque cela est exécuté, vous verrez la sortie suivante:

default stuff 
custom stuff 

Suivre cet video de la série Polycasts e à explique comment créer et mettre en œuvre des comportements. Il couvre également les méthodes abstraites.

J'ai configuré un Plunker here. Lorsque vous cliquez sur le texte "cliquez sur moi", cela déclenche une fonction qui modifie la valeur du tableau de sorte que la fonction observer est appelée.

Answer 3

Merci beaucoup @Ben pour la réponse, c'est une bonne solution pour résoudre le problème.

Une nouvelle idée de votre solution est que je pouvais choisir de remplacer complètement la méthode par défaut ou l'utiliser où je veux, ainsi:

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

Utilisation de la méthode standard « dataChanged » qui appelle la " superDataChanged » méthode du composant sera:

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

de cette façon, je pouvais choisir quoi faire avec les « trucs par défaut ».