这有点疯狂......
我有一个html代码,使用on-click
调用一个函数,它有效!
Whan我想添加另一个函数或重命名相同的函数(在on-click
调用中也是如此),它给了我这个错误:
[dom-bind::_createEventHandler]: listener method `name of function` not defined
所有要做的就是重命名该功能。 Whare你定义'功能'?
我使用的是聚合物1.0
这是给我错误的代码。
的index.html:
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit" />
<title>ZekTecBell</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved class="fullbleed layout vertical" scroll="no" style="overflow: hidden">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="paper-font-title">Menu</span>
</paper-toolbar>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<paper-button on-click="testButton">Signup</paper-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">Test</div>
</div>
</paper-toolbar>
<!-- Main Content -->
</paper-scroll-header-panel>
</paper-drawer-panel>
<platinum-sw-register auto-register
clients-claim
skip-waiting
on-service-worker-installed="displayInstalledToast">
<platinum-sw-cache default-cache-strategy="fastest"
cache-config-file="cache-config.json">
</platinum-sw-cache>
</platinum-sw-register>
-->
</template>
<script src="main.js"></script>
</body>
</html>
main.js:
app.displayInstalledToast = function() {
// Check to make sure caching is actually enabled—it won't be in the dev environment.
if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) {
Polymer.dom(document).querySelector('#caching-complete').show();
}
};
// Listen for template bound event to know when bindings
// have resolved and content has been stamped to the page
app.addEventListener('dom-change', function() {
console.log('Our app is ready to rock!');
});
// See https://github.com/Polymer/polymer/issues/1381
window.addEventListener('WebComponentsReady', function() {
// imports are loaded and elements have been registered
});
// Main area's paper-scroll-header-panel custom condensing transformation of
// the appName in the middle-container and the bottom title in the bottom-container.
// The appName is moved to top and shrunk on condensing. The bottom sub title
// is shrunk to nothing on condensing.
window.addEventListener('paper-header-transform', function(e) {
var appName = Polymer.dom(document).querySelector('#mainToolbar .app-name');
var middleContainer = Polymer.dom(document).querySelector('#mainToolbar .middle-container');
var bottomContainer = Polymer.dom(document).querySelector('#mainToolbar .bottom-container');
var detail = e.detail;
var heightDiff = detail.height - detail.condensedHeight;
var yRatio = Math.min(1, detail.y / heightDiff);
// appName max size when condensed. The smaller the number the smaller the condensed size.
var maxMiddleScale = 0.50;
var auxHeight = heightDiff - detail.y;
var auxScale = heightDiff / (1 - maxMiddleScale);
var scaleMiddle = Math.max(maxMiddleScale, auxHeight / auxScale + maxMiddleScale);
var scaleBottom = 1 - yRatio;
// Move/translate middleContainer
Polymer.Base.transform('translate3d(0,' + yRatio * 100 + '%,0)', middleContainer);
// Scale bottomContainer and bottom sub title to nothing and back
Polymer.Base.transform('scale(' + scaleBottom + ') translateZ(0)', bottomContainer);
// Scale middleContainer appName
Polymer.Base.transform('scale(' + scaleMiddle + ') translateZ(0)', appName);
});
// Scroll page to top and expand header
app.scrollPageToTop = function() {
app.$.headerPanelMain.scrollToTop(true);
};
app.closeDrawer = function() {
app.$.paperDrawerPanel.closeDrawer();
};
app.testButton = function() {
console.log('login?');
}
})(document);
感谢。
答案 0 :(得分:0)
试试这个:
<paper-button onclick="testButton">Signup</paper-button>
并且最好使用ontab而不是onclick。
修改强>
我错了。实际上,on-click是正确的倾听者。
我实际上认为这是你的HTML标记或你的Polymer版本的问题。我尝试了这段代码,它对我有用:
<body unresolved class="fullbleed layout vertical" scroll="no" style="overflow: hidden">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-button on-click="testButton">Signup</paper-button>
</template>
<script src="scripts/app.js"></script>
</body>
你也错过了一个simicolon:
app.testButton = function() {
console.log('login?');
}; // here
如果它不适合你,也许你需要开始一个新项目。