代码之家 › 专栏 › 技术社区 › yberg

聚合物2.0中的全局功能

polymer-2.x polymer

yberg · 技术社区 · 7 年前

有没有办法在Polymer 2.0中声明一个可用于其他组件的全局函数?我有一个 moment.html 使用力矩的文件。项目中的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 . 如何使该功能公开?

编辑 :我可以调用 总体安排 从另一个组件的脚本标记中执行功能,但我无法从模板中访问它,即使用:

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

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

3 回复 | 直到 7 年前

Rickard Elimää 7 年前

我认为,对于你的任务来说,最好的文件是莫妮卡·迪库列斯库自己的备忘单。

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

她是一名聚合物开发人员。下面是我从链接复制粘贴。这是 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>

Cappittall 7 年前

这是我如何工作的示例;

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

Tushar Acharekar 7 年前

作为您的 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