javascriptpolymer-1.0mixinspolymer-2.xpolymer-starter-kit

How to access functions defined in js file inside the template of Polymer element?


I have created a function in global.function.js file as

function getData(flag) {
if (flag === 1) {
  return "one";
 } 
else {
  return "not one";
 }
}

which then is imported using custom-js-import.html element:

<script src="global.function.js"></script>

When I tried to access the above function in custom-element.html, I am able to access it in the script part but not in the template part. Is there any way I can access the function inside the HTML element?

<!-- custom-element.html -->
<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import" href="custom-js-import.html">

<dom-module id="custom-element">

  <template>
    <div>
      Hello
    </div>
    <div id="data"></div>
    <div>{{getData(1)}}</div><!-- Unable to access this from here -->
    <div>{{getLocalData()}}</div>
  </template>

<script>
  // Define the class for a new element called custom-element
  class CustomElement extends Polymer.Element {
    static get is() { return "custom-element"; }
    constructor() {
        super();
      }

      ready(){
        super.ready();
        this.$.data.textContent = "I'm a custom-element.";
        console.log(getData(1));//can be easily accessed from here
      }

      getLocalData(){
        return "local";
      }

  }
  // Register the new element with the browser
  customElements.define(CustomElement.is, CustomElement);
</script>
</dom-module>

Sample Code


Solution

  • Thanks to Rico Kahler for suggesting me to use a mixin. Using mixin solved my problem. You can view the full working sample here.

    All the global functions can be defined in the mixin.

    <!--custom-mixin.html-->
    <script>
      const CustomMixin = superclass => class extends superclass {
    
    static get properties() {
      return {};
    }
    
    connectedCallback() {
      super.connectedCallback();
    }
    
    getData(flag) {
       if (flag === 1) {
        return "one(From Mixin)";
       } else {
        return "not one(From Mixin)";
       }
      }
     };
    </script>
    

    And remember to import the mixin file and add that mixin to your element.

    <!-- custom-element.html -->
    <link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
    <link rel="import" href="custom-mixin.html">
    
    <dom-module id="custom-element">
    
      <template>
        <div>
          Hello
        </div>
        <div id="data"></div>
        <div>{{getData(1)}}</div>
        <!-- Unable to access this from here -->
        <div>{{getLocalData()}}</div>
      </template>
    
      <script>
        // Define the class for a new element called custom-element
        class CustomElement extends CustomMixin(Polymer.Element) {
            static get is() {
              return "custom-element";
            }
            constructor() {
              super();
            }
    
            ready() {
              super.ready();
              this.$.data.textContent = "I'm a custom-element.";
              console.log(getData(1)); //can be easily accessed from here
            }
    
            getLocalData() {
              return "local";
            }
    
          }
          // Register the new element with the browser
        customElements.define(CustomElement.is, CustomElement);
      </script>
    </dom-module>