Polymer 2.0 中的全局函数

Question

有什么方法可以在 Polymer 2.0 中声明一个可以在其他组件中使用的全局函数吗？我有一个 moment.html 文件用于在项目中使用 moment.js：

<script src="../bower_components/moment/moment.js"></script>

在同一个文件中，我还声明了一个函数，而不是在我想使用它的每个组件中都声明它：

<script>
  function format(date) {
    return moment(date).format('dddd, D MMMM YYYY');
  }
</script>

moment 对象在导入文件后可用，但当我尝试调用 format 函数时，它给我警告 method 'format' not defined。我怎样才能公开该函数？

Edit：我可以从另一个组件的脚本标签中调用 format 函数，但我无法从模板中访问它，即：

<strong>[[format(event.date)]]</strong>

我想在页面上呈现函数的结果，而不是以编程方式访问它。

Answer 1

这是我如何工作的示例；

<paper-button on-tap="customfunc"> Test </paper-button>
<div><strong>[[format(date)]]</strong></div>   // result at screen: Saturday, 20 January 2018
  ...
<script>
class MyTest extends Polymer.Element {
  static get is() { return 'test-component'; }

  ready(){
      super.ready();
      this.set('date', new Date())
   }
   customfunc() {
      var d = new Date();
      var dd = this.format(d);
      console.log("d ", d, " - dd = ", dd);// d  Sat Jan 20 2018 17:02:38 GMT+0300 (Türkiye Standart Saati)  - dd =  Saturday, 20 January 2018
   }
   format(date){
      return moment(date).format('dddd, D MMMM YYYY');
   }

Answer 2

由于您的 format_function 在 shadow root 中，您必须使用 .shadowRoot.querySelector

下面是我的工作代码，在此我在 page1 中有 format_funtion 并在 page2

中调用它

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">


<!-- my-app element -->
<dom-module id="my-app">
  <template>   
    <my-page1></my-page1>
    <my-page2></my-page2> 
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() {
        return 'my-app'
      }
      constructor() {
        super();
      }
    }
    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>


<!-- page1 element -->
<dom-module id="my-page1">
  <script>
    class MyPage1 extends Polymer.Element {
      static get is() {
        return 'my-page1';
      }
      constructor() {
        super();
      }
      format_function() {
        alert("in format function");
      }
    }
    window.customElements.define(MyPage1.is, MyPage1);
  </script>
</dom-module>

<!-- page2 element -->
<dom-module id="my-page2">
  <template> <div on-click="test">click to test format_funtion.....!</div></template>
  <script>
    class MyPage2 extends Polymer.Element {
      static get is() {return 'my-page2';}
      
      test() {
        var host = document.querySelector('my-app').shadowRoot.querySelector('my-page1');
        host. format_function();
      }
    }
    window.customElements.define(MyPage2.is, MyPage2);
  </script>
</dom-module>



<!-- calling element -->
<my-app></my-app>

Don't forget to import files e.g page.html or page2.html

Answer 3

我认为，对于您的任务，最好的文档是 Monica Dinculescu 自己的作弊 sheet。

https://meowni.ca/posts/polymer-2-cheatsheet/#defining-a-mixin

她是一名 Polymer 开发人员。下面是我从link复制粘贴的。这是 extends MyMixin(Polymer.Element) 的神奇之处。

定义 class 表达式混合以在不同元素之间共享实现：

<script>
  MyMixin = function(superClass) {
    return class extends superClass {
      // Code that you want common to elements.
      // If you're going to override a lifecycle method, remember that a) you
      // might need to call super but b) it might not exist
      connectedCallback() {
        if (super.connectedCallback) {
          super.connectedCallback();
        }
        /* ... */
      }
    }
  }
</script>

在元素定义中使用 mixin：

<dom-module id="element-name">
  <template><!-- ... --></template>
  <script>
    // This could also be a sequence:
    //class MyElement extends AnotherMixin(MyMixin(Polymer.Element)) { … }
    class MyElement extends MyMixin(Polymer.Element) {
      static get is() { return 'element-name' }
      /* ... */
    }
    customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

Polymer 2.0 中的全局函数

Global functions in Polymer 2.0

polymer

polymer-2.x