Cil*_*nco 7 javascript polymer
目前我正在尝试使用Polymer的第一步.现在我有一个带有纸质按钮的简单页面,但我无法为其注册点击事件.我试过这段代码:
<paper-button raisedButton
id="test"
class="colored"
label="Click"
link="http://twitter.com"
on-click="{{ goLink }}">
</paper-button>
<script>
Polymer('#test', {
goLink: function(e)
{
window.location.href = e.target.getAttribute('link');
}
});
</script>
不会触发click事件.代码有什么问题？第二个问题:我应该使用on-click或on-tab在我的代码中吗？
Dir*_*orf 16
您不能通过调用Polymer()具有某个任意元素的id 的函数来定义Polymer组件.您需要创建一个包含按钮和处理程序代码的Polymer元素,如下所示:
<body unresolved>
<polymer-element name="link-button">
<template>
<paper-button raisedButton id="test" class="colored"
label="Click" link="http://twitter.com"
on-click="{{ goLink }}">
</paper-button>
</template>
<script>
Polymer('link-button', {
goLink: function(e) {
window.location.href = e.target.getAttribute('link');
}
})
</script>
</polymer-element>
<link-button></link-button>
</body>
或者您需要将按钮包装在自动绑定模板中:
<body unresolved>
<template id="bind" is="auto-binding">
<paper-button raisedButton id="test" class="colored"
label="Click" link="http://twitter.com"
on-click="{{ goLink }}">
</paper-button>
</template>
<script>
var bind = document.querySelector('#bind');
bind.goLink = function(e) {
window.location.href = e.target.getAttribute('link');
}
</script>
</body>
对于第一个版本,link-button如果将硬编码链接(可能还有其他一些值)转换为属性,则可以创建可重用元素.
顺便说一下.你可以使用'on-tap'或'on-click'.使用鼠标单击按钮时会触发这两个事件.
编辑:
如果你想要的只是花哨的纸质按钮,你可以通过简单地向元素添加一个事件监听器来进行任何聚合物特定的编程:
<paper-button raisedButton id="test" class="colored"
label="Click" link="http://twitter.com">
</paper-button>
<script>
document.querySelector('#test').addEventListener('click', function(e) {
window.location.href = e.target.getAttribute('link');
})
</script>
但是,如果你只关注它的组件 - 消费者方面,我认为你会错过聚合物(以及一般的Web组件)的很多功能.
| 归档时间： |
|
| 查看次数： |
15335 次 |
| 最近记录： |