用lit-element替换_didRender是什么

Bol*_*ade 0 javascript polymer-3.x lit-element

我正在尝试在应用程序中使用自定义元素,但是在升级到当前版本的lit-element后,我似乎找不到_didRender的替换功能。我尝试了firstUpdatedconnectedCallback没有成功。我该怎么办。代码呈现,但是在呈现和修改ajax调用后,我希望呈现器会更新,但它不会

import {LitElement, html} from 'lit-element';
import '@material/mwc-formfield/mwc-formfield.js';
import '@material/mwc-checkbox/mwc-checkbox.js'
import '@polymer/iron-ajax/iron-ajax.js';

class FhirActiveStatus extends LitElement{
    static get properties() {
        return {
            /**activeStatus is used to show active status of person true or false. Use this property to show/hide. Default: true */
            activeStatus: {type:Boolean},
            /**url is used to make AJAX call to FHIR resource. Default: null */
            url: {type:String},
            /**value is used to take the input value of each field*/
            value: {type:Boolean}
        }
    }

    /**default value of properties set in constructor*/
    constructor() {
        super();
        this.activeStatus = 'true';
        this.value = false;
    }


    /**_didRender() was used here after the ajax call had been made*/
    async firstUpdated() {
        this.shadowRoot.getElementById('ajax').addEventListener('iron-ajax-response', function (e) {
            var active = this.parentNode.host;
            if (e.detail.response.active) {
                active.shadowRoot.querySelector('.activeState').checked = true;

            }
            else if (!e.detail.response.active) {
                active.shadowRoot.querySelector('.activeState').checked = false;
            }
            else {
                this.parentNode.removeChild(this.parentNode.querySelector('#activeDiv'));
            }
        });
    }

    render() {
        return html`
       <div id="activeDiv">
       ${this.activeStatus !== 'false' ? html`<mwc-formfield class="activeStatus" alignEnd label="ACTIVE STATUS:">
         <mwc-checkbox id="active" checked="${this.value}" class="activeState" @click="${e => this.value = e.target.value}"></mwc-checkbox>
         </mwc-formfield>` : ''}
       </div>
       <iron-ajax  auto id="ajax" bubbles auto handle-as="json" url="${this.url}"></iron-ajax>
    `;
    }
}

window.customElements.define('fhir-active-status', FhirActiveStatus);
Run Code Online (Sandbox Code Playgroud)

小智 5

看看LitElement的生命周期https://lit-element.polymer-project.org/guide/lifecycle

_didRender()我相信现在已更新()