我在普通的Polymer Elements中加载Javascript时遇到问题：
这是在没有聚合物的情况下执行时完美无缺的测试代码：
<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并尝试以下插入：
NR。 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：在属性id之后.Chrome改为：”SyntaxError：Unexpected Identifier“。
两者都指向“var button = document.getelementById（”button“）行;
根据Polymer Documentation，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>
但这次我得到：“未捕获的TypeError：无法读取属性'addEventListener'的null”，它将agian指向我写的行：“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>
在聚合物元素中，您可以使用on-tap =“{{function}}”属性直接绑定到函数。
编辑：所有代码都没有进入阻止
将事件监听器保存在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次：我认为如果不使用声明性方法，使用匿名函数是最简单的方法。代码编辑
script标签位于关闭模板标签和关闭聚合物元素标签之间或元素定义之前，但在这种情况下，当您调用Polymer（'my-element'）时，您需要包含标签名称
以下是外部js文件的上述示例，您可以使用css执行相同的操作
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
<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 src="my-element/my-element.js"></script>
</polymer-element>
文件夹名称和js文件名可以是您想要的任何内容，但我认为您可以像这样构建好的实践
文件夹结构
-myelements -folder
--my-first-element -folder
--my-first-element.html
--my-first-element.css
--my-first-element.js
--my-second-element -folder
--my-second-element.html
--my-second-element.css
--my-second-element.js
<polymer-element name="ouch-button">
<template>
<button on-click="{{onClick}}">Send hurt</button>
</template>
<script>
Polymer({
onClick: function() {
alert('ouch', {msg: 'That hurt!'}); // fire(type, detail, targetNode, bubbles?, cancelable?)
}
});
</script>
</polymer-element>
<ouch-button></ouch-button>