聚合物1.0绑定函数在dom绑定

时间:2015-09-23 07:41:45

标签: polymer-1.0

我试图将函数从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>&lt;template is="auto-binding"&gt; 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>

提前致谢。

1 个答案:

答案 0 :(得分:4)

您不应该在事件名称周围使用大括号。改变如下,它应该工作

<number-element number="[[item]]" on-click="handleClick"></number-element>