聚合物：在 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>

我在腳本標簽中定義了這樣的 on-tap 函數

    <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 文件中使用了聚合物組件。