Polymer 2.0中的全局功能-Java 学习之路

有没有办法在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>

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

3 回答

我认为，对于你的任务，最好的文件是Monica Dinculescu自己的备忘单 .

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

她's a Polymer developer. Below is me copy pasting from the link. It'是魔法的 extends MyMixin(Polymer.Element) .

定义类表达式mixin以在不同元素之间共享实现：

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

回复于 2024-05-12T19:47:04+08:00

以下是我如何工作的示例;

<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');
   }

回复于 2024-05-12T19:47:04+08:00

当你的 format_function 在影子根中时，你必须使用 .shadowRoot.querySelector

下面是我的工作代码，在这里我 format_funtion 在 page1 并在 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>

不要忘记导入文件，例如page.html或page2.html

回复于 2024-05-12T19:47:04+08:00

Polymer 2.0中的全局功能

3 回答

相关问题