在以下Polymer自定义组件中,当函数' deleteState'被调用(所以当我点击"删除"纸张项目时)我总是得到#34; Uncaught SyntaxError:意外的令牌("来自Chrome。 在Firefox上,我得到" SyntaxError:function语句需要一个名字"控制台出错。
<polymer-element name="tw-state" attributes="stateId">
<template>
<style>
...
</style>
<paper-shadow z="1">
<div layout vertical>
<div class="state-header" layout horizontal center-justified>
<div flex style="margin: 10px">
<content select="h3"></content>
</div>
<paper-menu-button>
<paper-icon-button icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Settings</paper-item>
<paper-item onclick="{{deleteState}}">Delete</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</div>
<div class="state-body" layout vertical start>
<content></content>
</div>
<div class="state-footer" layout horizontal center-justified>
<paper-input-decorator label="New task" flex>
<input is="core-input">
</paper-input-decorator>
<paper-button noink="" role="button" tabindex="0">
<core-icon icon="add" aria-label="add" role="img"></core-icon>
</paper-button>
</div>
</div>
</paper-shadow>
</template>
<script>
Polymer({
deleteState: function() {
console.log("Fire event delete-state");
this.fire('delete-state', {id: 'this.stateId'});
}
});
</script>
在查看文档和大量示例后,我仍然没有看到我做错了什么......
答案 0 :(得分:5)
在paper-item
中,您需要polymer event handler
on-click="{{deleteState}}"
而不是普通的onclick
DOM处理程序。如果您使用onclick
字符串“{{deleteState}}”被评估为JavaScript代码,则会导致上述错误。
如果使用on-click
,Polymer会对此字符串进行评估,并将deleteState()
函数绑定为单击处理程序。