@danielkalen/simplybind/benchmarks/src/bower_components/aurelia-binding/doc/example/binding-binding-behaviors/custom/app.html

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

<template>
  <div>
    <form>
      <div>
        <label for="firstName">First Name (throttled 200ms and intercepted)</label>
        <input type="text" id="firstName" placeholder="First Name"
               value.bind="firstName & demoIntercept:myFunc & throttle">
        <p>${firstName}</p>
      </div>

      <div>
        <label for="lastName">Last Name (debounced 800ms and intercepted)</label>
        <input type="text" id="lastName" placeholder="Last Name"
               value.bind="lastName & demoIntercept:myFunc & debounce:800">
        <p>${lastName}</p>
      </div>
      <button type="button" style="margin-bottom: 50px"
              click.trigger="clear() & demoIntercept:myFunc">Clear Form</button>
    </form>

    <div mousemove.delegate="mouseMove($event) & demoIntercept:myFunc & throttle">
      <div>
        <h3>mousemove - throttled and intercepted</h3>
      </div>

      <div>
        <strong>Move the mouse inside this panel! (${mouseX}, ${mouseY})</strong>
      </div>
    </div>

    <!-- logging -->
    <output style="max-height: 300px; overflow-y: auto">
      <div repeat.for="x of intercepted" css="color: ${x.color}">
        Intercepted the binding's [${x.method}] method.  The value is "${x.value}"
      </div>
    </output>
</template>