我在正常的 Polymer Elements 中加载 Javascript 时遇到问题:
这是在没有 polymer 的情况下执行时运行良好的测试代码:
<body>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button id="button">Testbutton</button>
</div>
<script>
function popup2() {
alert("What's up brow?");
console.log("deine mudda");
};
var button = document.getElementById("button");
button.addEventListener("click", popup2, false);
</script>
</script>
</body>
但我想在 Polymer Elements 中使用 Javascript 并尝试了以下插入:
编号。 1:脚本标签内的Javascript，模板标签之后:
<polymer-element name="my-element">
<template>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button id="button">Testbutton</button>
</div>
</template>
<script>
Polymer('my-element', {
popup: function() {
alert('What the... dude?');
},
var button = document.getElementById("button");
button.addEventListener("click", popup, false);
});
</script>
</polymer-element>
这行不通。我在 firefox 中收到错误消息:“SyntaxError: missing : after property id. Chrome 而不是说:“SyntaxError: Unexpected Identifier”。
都指向行 "var button = document.getelementById("button");
根据 Polymer 文档，javascript 应该放在文件末尾: https://www.polymer-project.org/docs/start/tutorial/step-1.html
所以在第二次尝试中，我将我的 Javascript 直接放在模板标签内，如下所示:
<polymer-element name="my-element">
<template>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button id="button">Testbutton</button>
</div>
<script>
function popup() {
alert("jajaja");
};
var button = document.getElementById("button");
button.addEventListener("click", popup, false);
</script>
</template>
<script>
Polymer('my-element', {
});
</script>
</polymer-element>
但这次我得到:“Uncaught TypeError: Cannot read property 'addEventListener' of null”，它再次指向我写的行:“button.addEventListener("click", popup, false);"。
我猜这意味着编译器看不到按钮 ID，因为它在 Shadow-Dom 中？
请指导我。
最佳答案
<polymer-element name="my-element">
<template>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button on-tap="{{popup}}">Testbutton</button>
</div>
</template>
<script>
Polymer('my-element', {
popup: function() {
alert('alert');
}
});
</script>
</polymer-element>
在 polymer 元素中，您可以使用 on-tap="{{function}}"属性直接绑定(bind)到函数。
已编辑:所有代码都没有进入 block
在js方法中保留事件监听器
<polymer-element name="my-element">
<template>
<style>
#content {background-color: #f2f2f2;}
#button {padding: 10px 20px;}
</style>
<div id="content">
<h1 id="title">Title</h1>
<p>This example uses the addEventListener() method to attach a click event to the document.</p>
<button id="button">Testbutton</button>
</div>
</template>
<script>
Polymer('my-element', {
ready: function () {
var button = this.$.button;
button.addEventListener("click", function () {
alert('alert');
});
}
});
</script>
</polymer-element>
再次编辑:OP 希望将 html 与 JS 分开
再编辑 1 次:如果不使用声明性方法，我认为使用匿名函数是最简单的方法。代码已编辑
关于javascript - Polymer:我究竟应该把我的 Javascript 放在哪里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26820016/