Hello!, I'm quite new with hyperHTML, and I cannot wrap my head around conditional

What am I doing wrong? about hyperhtml HOT 2 CLOSED

AmandaOliver commented on May 28, 2024

What am I doing wrong?

from hyperhtml.

Comments (2)

WebReflection commented on May 28, 2024

The following seems to work for me, and the thing is that you need to update the bound content too, and it should be through a callback, otherwise the template literal is different (even if it looks the same).

const {bind, wire} = require("hyperhtml");

window.showNested = true;
window.showNestedToggle = state => {
  window.showNested = state;
  update();
};
function Test() {
  this.state = {
    showNested: window.showNested
  };
}
Test.prototype = {
  renderNestedWire: function() {
    return wire(this.state, ":nestedid")`<p>hello from nested</p>`;
  },
  render: function() {
    this.state = {
      showNested: window.showNested
    };
    const nestedWire = this.state.showNested ? this.renderNestedWire() : "";
    const anotherNestedWire = wire(
      this.state,
      ":anothernestedid"
    )`<p>hello from another nested</p>`;
    return wire(this.state, ":testid")`
			<div>
				${nestedWire}
				${anotherNestedWire}
			</div>
		`;
  }
};
const test = new Test();
const view = bind(window.document.body.querySelector("#app"));
update();
function update() {
  view`${test.render()}`;
}

setInterval(() => { window.showNestedToggle(!window.showNested); }, 2000);