Another Vue and hyperHTML example

[albertosantini]

The original example, the "simple" creation of an input list, was written with Angular. But, by design, that "simple" loop doesn't work. Don't worry, we fixed it.

Then we tried with Vue and it worked out-of-box. At the end I reproduced the same case with hyperHTML.

Just an interesting example to show how productivity, abstraction and complexity work together. You get what you "pay" for.

      render() {
        this.html`${this.data.inputs.map((inp, index) => this.getWire(index)`
          <input value="${inp}" oninput="${e => this.onInput(e, index)}"><br>
        `)}${JSON.stringify(this.data.inputs)}`;
      }

I hope I wrote it in "idiomatic" hyperHTML. :) If you like, you may add it to the examples.

Also the casual hyperHTML user may write that render function in different way, breaking the 2.5 rules, obtaining any sort of result: from wrong rendering to runtime errors. Notice also the array of primitives instead of objects.

Live Example for Vue and hyperHTML: http://plnkr.co/edit/RUvsemlr4UNSCgFw3wQ1?p=preview Live Example for Angular: https://stackblitz.com/edit/angular-l2uauw

[WebReflection]

the 2.5 rules have changed long time ago (when V1 was released)

render() {
  this.html`${this.data.inputs.map((inp, index) => this.getWire(index)`
      <input value=${inp} oninput=${e => this.onInput(e, index)}><br>
  `)}
  ${JSON.stringify(this.data.inputs)}`;
}

but you are opening an issue in hyperHTML when you'd like to have an example in the documentation, right? If that's the case, mind closing this and doing a PR or re-opening the same in the right repository?

https://github.com/viperHTML/viperhtml.github.io

thanks