@danielkalen/simplybind/comparison/dist/bower_components/aurelia-binding/doc/example/binding-how-it-works/ast/app.html

Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.

<template>
  <require from="./expression.js"></require>

  <style>
    .expression-input {
      width: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .expression-well {
      background: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      border: 1px solid #70519E;
      box-shadow: inset 0 1px 2px 0 rgba(0,0,0,.4),0 1px 0 0 rgba(255,255,255,.2);
    }
  </style>

  <button repeat.for="example of examples"
          click.delegate="expressionString = example.expression">
    ${example.name}
  </button>

  <label>
    Binding Expression:
    <input class="expression-input" type="text" value.bind="expressionString"
           placeholder="Enter binding expresson...">
  </label>

  <div class="expression-well" if.bind="value">
    <expression value.bind="value"></expression>
    ${error}
  </div>
</template>