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

Question

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

Answer 1

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>