Question

我想在不同的自定义元素中使用共享函数进行计算绑定。这可能吗？

无论我如何导入共享函数，我都会遇到控制台错误：

method `formatAmount` not defined

计算出的绑定类似于：

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

我尝试在元素上方使用标记。我已经在元素内部尝试过了。我已经尝试过index.html。

是否需要在自定义元素中定义所有计算出的绑定方法，并且无法共享？我必须使用mixin吗？

更新：我已经创建了一个丑陋的工作，我在我的自定义元素上定义一个调用共享方法的私有方法。然后在计算绑定中使用私有方法。由于额外的样板，这很难看。

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

这与我几个月前提出的问题类似question。

您可以使用mixin。 mixin只是一个接受类并返回子类的函数。如果您想了解更多click here。

对于您的问题，请在单独的html文件中定义mixin说 - my-mixin.html：

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

    constructor() {
      super();          
    }

    formatAmount(amount) {
      //function contents  
    }

}

然后在你的元素导入中添加mixin：

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

class MyFoo extends MyMixin(Polymer.Element)

然后你可以简单地从元素中调用函数：

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

要在脚本中使用super.formatAmount(amount)来访问该功能。

Polymer：如何在计算绑定

1 个答案: