javascript - 聚合物:在 index.html 中未识别 dom-repeat 项目上的点击事件
问题描述
我有一个带有入口点 index.html 的聚合物应用程序。出于某种原因,我不得不在 index.html 本身中使用 dom-repeat 而不是聚合物元素。代码是这样的
<dom-bind id="mainbody">
<template>
<app-drawer-layout>
<app-drawer slot="drawer">
<template is="dom-repeat" id="mainDemoBody">
<paper-item data-value={{item.is}} id="demoItem" on-tap="onElementSelect">
{{item.is}}
</paper-item>
</template>
</app-drawer>
<div> Main content
<div>
</app-drawer-layout>
</template>
</dom-bind>
我在这样的脚本标签中定义了点击功能
<script>
function onElementSelect(e) {
console.log('here');
this.selectedElement = e.model.item;
this.elementTags = this.selectedElement.tags;
this.demoLoaded = false;
}
</script>
但是我在单击用户界面上的任何 dom-repeat 项时出现以下错误
onElementSelect
未定义侦听器方法
有人可以在这里帮助我吗,在此先感谢。
解决方案
“ onElementSelect ”似乎没有与 dom-bind#mainbody 绑定。我的建议是创建一个与主体绑定的函数。这似乎对我有用。
代码 :-
var mainbody = document.getElementById('mainbody');
mainbody.onElementSelect = function(e){
console.log('here');
this.selectedElement = e.model.item;
this.elementTags = this.selectedElement.tags;
this.demoLoaded = false;
}
编辑:请注意,所提供的解决方案对于聚合物元素来说是不合适或不必要的。在这种情况下需要此特定修复程序,因为聚合物组件正在 html 文件中使用。
推荐阅读
- ios - 使用 MacOS 10.12 将应用程序上传到 App Store
- qt - 尝试上传图像时,Twitter api 错误“代码 32 无法验证您”
- html - 打印预览未显示正确的布局
- javascript - panel.scrollHeight < 实际高度面板
- java - CognitiveJ/ExampleCode 出错
- html - 我的用于垂直对齐每个标题的 HTML 不起作用
- nlp - Amazon Lex - 手动停止对话
- reactjs - React Native - 如何在反应导航中的 StackNavigators 之间传递道具?
- android - onClick() 删除列表项并刷新
- python - 熊猫数据框将具有相同列值的行放在一起