Как получить доступ к функциям, определенным в файле js внутри шаблона элемента Polymer?

Есть ли способ получить доступ к функции внутри элемента HTML?

Не совсем. Чтобы использовать данные в шаблоне, вам необходимо привязать их к свойству (Polymer называет это привязкой данных).

Система привязки данных Polymer предназначена для привязки значений к шаблону. Эти значения обычно являются литералами (например, строками и числами) или простыми объектами javascript, например. {a: 'someval', b: 5}. Система привязки данных Polymer не предназначена для привязки функций к шаблону, и вы не можете просто использовать JavaScript внутри шаблона. (Если вам действительно нравится эта идея, попробуйте React как замену полимеру)< /а>.

Полимерный способ сделать то, что вы пытаетесь сделать, — это использовать вычисленное свойство. Вместо вызова функции внутри шаблона создайте вычисляемое свойство, которое реагирует на изменения других переменных. При изменении состояния свойства вычисляемое свойство также изменится. Это состояние можно рассматривать как аргумент вашей функции.

Я думаю, что лучше просто увидеть, как работает код (проверено в хроме)?

<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>
    <label>
      <input type="number" value="{{flag::input}}">
    </label>
    <h1>from flag: [[flag]]</h1>
    <div id="data"></div>
    <div>{{boundComputedData}}</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();
      }

      getData(flag) {
        const flagAsNumber = parseInt(flag);
        if (flagAsNumber === 1) {
          return "one";
        } else {
          return "not one";
        }
      }

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

      getLocalData() {
        return "local";
      }



      static get properties() {
        return {
          flag: {
            type: Number,
            value: 0
          },
          boundComputedData: {
            type: String,
            computed: 'getData(flag)'
          }
        };
      }

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

<custom-element></custom-element>

Итак, что я делаю здесь:

создание вычисляемого свойства boundComputedData и установка для свойства computed значения 'getData(flag)', что заставит его использовать функцию класса getData.

Теперь всякий раз, когда изменяется состояние свойства flag, вычисляемое свойство будет обновляться.

Надеюсь, поможет!

Спасибо Рико Калеру за предложение использовать примесь. Использование 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>

И не забудьте импортировать файл миксина и добавить этот миксин в свой элемент.

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