Bol*_*ade 0 javascript polymer-3.x lit-element
我正在尝试在应用程序中使用自定义元素,但是在升级到当前版本的lit-element后,我似乎找不到_didRender的替换功能。我尝试了firstUpdated和connectedCallback没有成功。我该怎么办。代码呈现,但是在呈现和修改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()我相信现在已更新()
| 归档时间: |
|
| 查看次数: |
43 次 |
| 最近记录: |