javascript - 聚合物：在 index.html 中未识别 dom-repeat 项目上的点击事件

Question

我有一个带有入口点 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未定义侦听器方法

有人可以在这里帮助我吗，在此先感谢。

Answer 1

“ 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 文件中使用。