具有功能的自动绑定模板（Polymer 1.x）

Question

你好，我有这个简单的索引文件：

<?php use Cake\Routing\Router; ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
    <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
</head>
<body unresolved>
<template id="app" is="dom-bind" >
    <h1 on-click="{{stateChange}}">Holaaa</h1>
</template>
<script>
    var app = document.querySelector('#app');
    app.stateChange= function(){
        console.log("stateChange");
    };
</script>
</body>
</html>

我收到这个错误：

[dom-bind::_createEventHandler]: listener method `{{stateChange}}` not defined

我有一个使用 Polymer 的应用程序，一切都运行良好。但是这个简单的例子是行不通的！为什么！？

为什么？我错过了什么？

我试过用 app 定义 stateChange 函数。没有应用程序。也没有成功。

我也试过将它包装在 dom 更改事件中，就像文档指出的那样，但没有用

app.addEventListener('dom-change', function() {
    stateChange= function(){
        console.log("stateChange");
    };
});

我尝试在应用程序的 dom-change 事件旁边定义 stateChange 函数。有了这个。没有任何东西。没有任何效果！

Answer 1

去掉大括号。

<h1 on-click="stateChange">Holaaa</h1>

Compatibility note: The syntax differs from 0.5, which required curly brackets ({{}}) around the event handler name.

来源：https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners

具有功能的自动绑定模板（Polymer 1.x）

Auto-binding templates with function (Polymer 1.x)

data-binding

templates

polymer

polymer-1.0