`this` теряется при использовании выражений lit-html - PullRequest
Новая
       47

`this` теряется при использовании выражений lit-html

0 голосов
/ 08 ноября 2018

Я тренируюсь с LitElement и lit-html. Я пытаюсь сделать сложные шаблоны с функциями и слушателем событий. У меня есть модуль для шаблона и другой для одного компонента, где я использую шаблоны. У меня проблема с шаблоном для кнопки, который я передаю функции в качестве параметра, и когда я нажимаю на кнопку, вызываю функцию. Это работает: он делает вызов, но ссылка для this потеряна. Я подумал, что возможной причиной может быть функция стрелки, поэтому я переписал эту функцию следующим образом: 

let timerElementOperation = function(operationTimer, operation,that){
    operationTimer.bind(that);
    return html` <button @click=${function(){operationTimer()}}>${operation}</button> `;
}

Но проблема все еще там. Что происходит? 

//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;
...