Vue Bindings List 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. :)

Also the casual hyperHTML user may write that render function in different way, 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

If you like, I can prepare a PR for the folder viperhtml.github.io/hyperhtml/examples/example/vue/bindings-list

[WebReflection]

Apologies @albertosantini I never came back to you on this.

The Vue example is interesting, the Angular link is broken though.

If you want to file a PR go ahead, but I think live binding is already covered ...or is it?

[albertosantini]

Done.

Review it and notice I didn't modified js/index.js.