如何訪問Polymer元素模板內js文件中定義的函數？

Question

我已經在global.function.js文件中創建了一個函數

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

然后使用custom-js-import.html元素將其導入：

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

當我嘗試在custom-element.html中訪問上述函數時，可以在腳本部分而不是模板部分中訪問它。 有什么方法可以訪問HTML元素內的函數？

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

樣例代碼

Answer 1

有什么方法可以訪問HTML元素內的函數？

並不是的。 為了在模板中使用數據，您需要將其綁定到屬性（Polymer將此數據綁定）。

Polymer的數據綁定系統旨在將值綁定到模板。 這些值通常只是文字（例如字符串和數字）或普通ole javascript對象，例如{a: 'someval', b: 5} 。 Polymer的數據綁定系統並非旨在將功能綁定到模板，並且您不能僅在模板內部使用javascript。 （如果您真的很喜歡這個主意，請查看React作為聚合物的替代品） 。

執行您要執行的操作的聚合方法是使用計算屬性 。 與其在模板內調用函數，不如創建一個對其他變量的變化做出反應的計算屬性。 當屬性的狀態更改時，計算出的屬性也將更改。 可以將這種狀態視為函數的參數。

我認為最好查看代碼是否正常（在chrome中測試）？

 <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更改時，計算的屬性都會更新。

希望能幫助到你！

Answer 2

感謝Rico Kahler建議我使用mixin 。 使用mixin解決了我的問題。 您可以在此處查看完整的工作示例。

可以在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>

並記住要導入mixin文件並將該mixin添加到您的元素中。

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