Polymer: How to use imported function in computed binding -
i'd use shared function computed bindings in different custom elements. possible?
no matter how import shared function, console errors:
method `formatamount` not defined
the computed binding like:
<span>[[formatamount(amount)]]</span>
i've tried using tag above element. i've tried inside element. , i've tried in index.html.
do computed binding methods need defined in custom element , can't shared? have use mixin?
update: i've created ugly work around define private method on custom element calls shared method. private method used in computed binding. ugly because of boilerplate.
... <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>
this similar question have asked few months ago.
you can use mixin
. mixin
function takes class , returns subclass. if want learn more click here.
for problem define mixin
in separate html file - my-mixin.html
:
const mymixin = (superclass) => class extends superclass { constructor() { super(); } formatamount(amount) { //function contents } }
and in element import , add mixin:
<link rel="import" href="my-mixin.html">
class myfoo extends mymixin(polymer.element)
then can call function element:
<template> ...[[formatamount(amount)]]... </template>
to access function in script use super.formatamount(amount)
.
Comments
Post a Comment