diff --git a/examples/type-restore/Object.mjs b/examples/type-restore/Object.mjs index 1fbed07..78da5fb 100644 --- a/examples/type-restore/Object.mjs +++ b/examples/type-restore/Object.mjs @@ -4,7 +4,7 @@ export class ObjectText extends WebComponent { static properties = ["object"]; onInit() { this.props.object = { - hello: 'world', + hello: 'worldzz', age: 2 }; } @@ -12,7 +12,37 @@ export class ObjectText extends WebComponent { console.log('>>> object', this.props.object) } get template() { - return ``; + const greeting = document.createElement('textarea') + greeting.innerHTML = this.props.object.hello; + greeting.setAttribute('id', 'greeting-field'); + const greetingLabel = document.createElement('label'); + greetingLabel.setAttribute('for', 'greeting-field'); + greetingLabel.textContent = 'Hello'; + greeting.onkeyup = () => { + this.props.object = { + ...this.props.object, + hello: greeting.value + }; + } + const ageField = document.createElement('input'); + ageField.value = this.props.object.age; + ageField.setAttribute('id', 'age-field'); + const ageLabel = document.createElement('label') + ageLabel.setAttribute('for', 'age-field'); + ageLabel.textContent = 'Age' + ageField.onkeyup = () => { + this.props.object = { + ...this.props.object, + age: ageField.value + } + } + const form = document.createElement('form'); + form.append(greetingLabel, greeting, ageLabel, ageField) + return form; + } + + render() { + if (this.children.length === 0) this.replaceChildren(this.template); } } diff --git a/examples/type-restore/index.html b/examples/type-restore/index.html index dbf9646..952258c 100644 --- a/examples/type-restore/index.html +++ b/examples/type-restore/index.html @@ -22,10 +22,21 @@ Toggle:
- String: + String:
- Object: + +

+