Polymer 2.0中的全局功能

Question

Is there any way to declare a global function in Polymer 2.0 that can be used in other components? I have a moment.html file for using moment.js in the project:

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

In the same file I also declare a function instead of declaring it in every single component where I want to use it:

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

The moment object is available after importing the file but when I try to call the format function it gives me the warning method 'format' not defined . How can I make the function publicly available?

Edit : I can call the format function from within the script tags of another component, but I cannot access it from within a template, ie with:

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

I want to render the result from the function on the page, not access it programmatically.

Answer 1

I think, for your task, the best documentation is Monica Dinculescu's own cheat sheet.

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

She's a Polymer developer. Below is me copy pasting from the link. It's the extends MyMixin(Polymer.Element) that does the magic.

---

Defining a class expression mixin to share implementation between different elements:

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

Using the mixin in an element definition:

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

Answer 2

Here is the sample how I work it ;

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

As Your format_function is in shadow root, you have to use .shadowRoot.querySelector

below is my working code, in this i have format_funtion in page1 and am calling it in 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 eg page.html or page2.html