Agfdhyk

I'm training with LitElement and li-html. I'm trying to make complex templates with functions and event listener. I have a module for the template module
and another for one component where I use the templates.
I'm having problem with a template for a buttom which I pass a function as parameter and when I clicked on the buttom call the function.
This is works, make the call but the reference for this it's lost. I thought a possible cause maybe arrow function so I rewrite the function like this:

let timerElementOperation = function(operationTimer, operation,that){

    operationTimer.bind(that);

    return html` <button @click=${function(){operationTimer()}}>${operation}</button> `;

}

But the problem carry on. What's happening?

//timer-element.js

class TimerElement extends LitElement{

    ...

    static get properties(){

        return {

            running:  { type: Boolean, reflect: true}

        };

    }

    render(){

        let partialTemplate;

        if( this.isPausable(this.running, this.finished) && this.time > 0 ){

            partialTemplate = Template.timerElementOperation(this.pause, 'pause');

        } else if(!this.running && this.time > 0){

            partialTemplate = Template.timerElementOperation(this.resume,'resume');

        }

    pause(){

        this.running = false; // this is lost.

    }



}



//timer-templates.js

import {html}   from '@polymer/lit-element';

let timerElementOperation = (operationTimer, operation) => {

    return html` <button @click=${()  => operationTimer()}>${operation}</button> `;

}



export timerElementOperation;