如何访问Polymer元素模板中js文件中定义的函数？ [英] How to access functions defined in js file inside the template of Polymer element?

问题描述

我在 global.function.js 文件中创建了一个函数

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

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

然后使用 导入custom-js-import.html 元素：

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

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

当我尝试在 custom-element.html <中访问上述功能时/ em> ，我可以在脚本部分访问它，但不能在模板部分访问它。
有什么方法可以访问HTML元素中的函数吗？

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>

示例代码

推荐答案

感谢 Rico Kahler 建议我使用 mixin 。使用 mixin 解决了我的问题。您可以在此处查看完整的工作样本。

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

所有全局函数都可以在mixin中定义。

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>

请记住导入mixin文件并将mixin添加到元素中。

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>

这篇关于如何访问Polymer元素模板中js文件中定义的函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！