Polymer: on-click event on dom-repeat item is not identified in index.html

Question

I have a polymer app with entry point index.html . For some reason i had to use dom-repeat inside index.html itself instead of a polymer element. The code is like this

    <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>

And i have on-tap function defined in the script tag like this

    <script>
    function onElementSelect(e) {
        console.log('here');
        this.selectedElement = e.model.item;
        this.elementTags = this.selectedElement.tags;
        this.demoLoaded = false;
    }
</script>

But i am getting following error on click of any item of dom-repeat on user interface

listener method onElementSelect not defined

Can someone help me out here, Thanks in advance.

Answer 1

"onElementSelect" doesn't seem to be binded with the dom-bind#mainbody. My suggestion is to create a function that has binding with mainbody. That seemed to work for me.

Code :-

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;
}

Edit: Please note that the solution provided is not proper or necessary for a polymer element. This particular fix is needed in this scenario because polymer components are being used in a html file.