时间戳

首页 > 解决方案 > 渲染函数内的模板无法解析 - LitElement

javascript - 渲染函数内的模板无法解析 - LitElement

问题描述

我试图通过 ajax 调用获取列表，但在它被解析之前，render()方法被调用并且依赖于 Promise 的模板片段无法解析并抛出未定义。

问题：在我从 Promise 中获取数据之前，如何显示加载器？

import {
    LitElement,
    html
} from 'lit-element';

class EmpComponent extends LitElement {
    constructor() {
        super();
        this.data = this.getEmpData();
    }

    getEmpData() {
        fetch('../../../emp-data.json')
            .then(
                function(response) {
                    if (response.status !== 200) {
                        console.log('Looks like there was a problem. Status Code: ' +
                            response.status);
                        return;
                    }

                    response.json().then(data => data);
                }
            )
            .catch(function(err) {
                console.log('Fetch Error :-S', err);
            });
    }

    render() {
        <div>
            ${this.data.map(emp => emp.active ? this.dataTemplate(emp) : '')} 
        </div>
    }
}

customElements.define('emp-component', EmpComponent);

收到此错误：

错误

标签： javascriptfetchlit-element

解决方案

第 1 步：创建一个js返回true或的文件false（例如 util.js）

export function when(expression, truVal, falseVal) {
    if (expression) {
        return truVal();
    }
    if (falseVal) {
        return falseVal();
    }
    return undefined;
}

第 2 步：js在您的文件中导入 util

import {
    LitElement,
    html
} from 'lit-element';
import {
    when
} from 'util.js'

第 3 步：在isLoading. static get properties所以在初始加载时，我们设置onload为 trueconstructor

import {
    LitElement,
    html
} from 'lit-element';
import {
    when
} from 'util.js'

class EmpComponent extends LitElement {
    static get properties() {
        return {
            isLoading: {
                type: Boolean
            },

        }
    }
    constructor() {
        super();
        this.isLoading = true;
    }

第 4 步：一旦获取数据，我们就可以渲染 DOM。然后我们可以设置isLoading为 false 然后使用渲染 DOMwhen

static get properties() {
    return {
        isLoading: {
            type: Boolean
        },
        canRender: {
            type: Boolean
        }
    }
}
constructor() {
    super();
    this.isLoading = true;
    this.canRender = false;
    this.data = this.getEmpData();
    this.isLoading = false;
    this.canRender = true;
}

render() {
    return html `
    ${when(this.isLoading,() => html`<p>Loading...</p>`)}
    ${when(this.canRender,() => html`<your-component></your-component>`)}
  `
}

这是until. 你可以从这个博客sabarinath blog获得更多细节

推荐阅读