如何访问 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>

Sample Code

Answer 1

Is there any way I can access the function inside the HTML element?

不是真的。为了在模板中使用数据，您需要将其绑定到属性（Polymer 称之为数据绑定）。

Polymer 的数据绑定系统专为将值绑定到模板而设计。这些值通常只是文字（例如字符串和数字）或普通的 ole javascript 对象，例如{a: 'someval', b: 5}。 Polymer 的数据绑定系统不是旨在将函数绑定到模板，您不能只在模板内部使用javascript。 (If you're really into that idea, check out React as a replacement to polymer).

做你想做的事情的聚合物方法是使用 computed property。不是在模板内部调用函数，而是创建一个计算的属性来响应其他变量的变化。当属性的状态改变时，计算出的属性也会改变。这个状态可以被认为是你函数的参数。

我认为最好只看代码是否有效（在 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)' 这将使其使用 class 函数 getData.

现在，只要属性 flag 的状态发生变化，计算出的属性就会更新。

希望对您有所帮助！

Answer 2

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

所有全局函数都可以在 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>

如何访问 Polymer 元素模板中 js 文件中定义的函数？

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

javascript

polymer-1.0

mixins

polymer-2.x

polymer-starter-kit