我在 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>
最佳答案
Is there any way I can access the function inside the HTML element?
不是真的。为了在模板中使用数据,您需要将其绑定(bind)到属性(Polymer 称之为数据绑定(bind))。
Polymer 的数据绑定(bind)系统旨在将值绑定(bind)到模板。这些值通常只是文字(例如字符串和数字)或普通的 ole javascript 对象,例如{a: 'someval', b: 5}
。 Polymer 的数据绑定(bind)系统并非旨在将函数绑定(bind)到模板,并且您不能仅在模板内使用 javascript。 (If you're really into that idea, check out React as a replacement to polymer) .
做你想做的事情的聚合物方法是使用 computed property 。不要在模板内调用函数,而是创建一个对其他变量的更改使用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>
所以我在这里做的是:
创建一个计算属性boundCompulatedData
并将compulated
属性设置为'getData(flag)'
,这将使其使用类函数获取数据
。
现在,只要属性 flag
的状态发生变化,计算属性就会更新。
希望对你有帮助!
关于javascript - 如何访问Polymer元素模板内js文件中定义的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45136185/