Polymère: comment utiliser la fonction importée dans la liaison calculée

Question

Je souhaite utiliser une fonction partagée pour les liaisons calculées dans différents éléments personnalisés. Est-ce possible?

Peu importe comment j'importer la fonction partagée, je reçois des erreurs de la console:

method `formatAmount` not defined 

La liaison calculée est quelque chose comme:

<span>[[formatAmount(amount)]]</span> 

J'ai essayé d'utiliser une balise au-dessus de l'élément. J'ai essayé à l'intérieur de l'élément. Et j'ai essayé dans index.html.

Toutes les méthodes de liaison calculées doivent-elles être définies dans l'élément personnalisé et ne peuvent pas être partagées? Dois-je utiliser un mixin? MISE À JOUR: J'ai créé un travail moche autour où je définis une méthode privée sur mon élément personnalisé qui appelle la méthode partagée. Ensuite, la méthode privée est utilisée dans la liaison calculée. C'est moche à cause de la plaque chauffante supplémentaire.

... 
<script src="format-amount.js"></script> 

<dom-module id="my-foo"> 
    <template> 
    ...[[_formatAmount(amount)]]... 
    </template> 
    <script> 
    class MyFoo extends Polymer.Element { 
     ... 
     _formatAmount(amount) { 
     return formatAmount(amount); // Defined in format-amount.js. 
     } 
    } 
    </script> 
</dom-module> 

Answer 1

Ceci est similaire à ce que je question ai demandé il y a quelques mois.

Vous pouvez utiliser mixin. Un mixin est simplement une fonction qui prend une classe et renvoie une sous-classe. Si vous voulez en savoir plus click here.

Pour votre problème définir mixin dans le fichier html séparé disent - my-mixin.html:

const MyMixin = (superClass) => class extends superClass { 

    constructor() { 
     super();   
    } 

    formatAmount(amount) { 
     //function contents 
    } 

} 

Et puis dans votre élément import et ajouter mixin:

<link rel="import" href="my-mixin.html">

class MyFoo extends MyMixin(Polymer.Element)

Ensuite, vous peut simplement appeler la fonction depuis votre élément:

<template> 
    ...[[formatAmount(amount)]]... 
</template> 

Pour accéder à la fonction dans le script, utilisez super.formatAmount(amount).