我试图将函数从dom-bind绑定到嵌套元素,如下所示。
不知何故,点击绑定无法正常工作。
我在控制台窗格中收到消息:[dom-bind :: _ createEventHandler]:未定义侦听器方法{{handleClick}}
。
<!DOCTYPE html>
<html>
<head>
<title>auto-binding test</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
</head>
<body unresolved>
<dom-module id="number-element" >
<template>
I'm number <span>{{number}}</span>. Click me!
<template is="dom-if" if="{{odd}}">
(By the way, I'm odd.)
</template>
</template>
<script>
Polymer({
is:'number-element',
properties: {
number: {
value: 0,
reflectOnAttributes: true,
observer: "numberChanged",
type: Number,
notify: true
},
odd: {
value: false,
type: Boolean,
notify: true
}
},
numberChanged: function() {
this.odd = this.number % 2 == 1 ? true : false;
}
});
</script>
</dom-module>
<template id="page-template" is="dom-bind">
<h1><template is="auto-binding"> Demo</h1>
<template is="dom-if" if="{{lastClicked}}">
<p>You last clicked on <span>{{lastClicked}}</span>.</p>
</template>
<template is="dom-repeat" items="{{numbers}}" as="item">
<p>
<number-element number="[[item]]" on-click="{{handleClick}}"></number-element>
</p>
</template>
</template>
<script>
var template = document.querySelector('#page-template');
template.isNumberOdd = {};
template.numbers = [0, 1, 2, 3];
template.handleClick = function(e) {
template.lastClicked = e.target.number;
};
</script>
</body>
</html>
提前致谢。
答案 0 :(得分:4)
您不应该在事件名称周围使用大括号。改变如下,它应该工作
<number-element number="[[item]]" on-click="handleClick"></number-element>