0

我正在使用 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;
4

1 回答 1

0

中的模板应该如何Template.timerElementOperation知道this应该是什么？这是一个孤立的功能。

有两种方法 - 第一种是显式绑定this：替换this.pause为this.pause.bind(this). 这会起作用，但老实说，这会产生相当特殊的代码。

@event通常的做法是使用Lit中的任何绑定都将this绑定到它所在的类的事实，因此：

class TimerElement 
    extends LitElement{
    ...

    renderTimerElementOperation(operation){
        return html`<button @click=${this[operation]}>${operation}</button>`;
    }

    render(){
        let partialTemplate;
        if( this.isPausable(this.running, this.finished) && this.time > 0 ){
            partialTemplate = this.timerElementOperation('pause');
        } else if(!this.running && this.time > 0){
            partialTemplate = this.timerElementOperation('resume');
        }

        return html`... ${partialTemplate} ...`
    }
}

这要简单得多，并且您通常希望将模板与关联元素一起保留或保留在关联元素中，而不是导入。如果您想要一些可重用的东西，请创建另一个LitElement 来重用它，而不是导入单独呈现模板的函数。

于 2021-05-06T20:06:09.473 回答