can/demos/forms/bindings-ddau.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<my-name></my-name>

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { StacheElement } from "can";

class MyName extends StacheElement {
    static view = `
        <label>
            Name:
            <input type="text" value:from="this.name" on:change="this.handleAction('set', 'name', scope.element.value)">
        </label>

        <p>Given name: {{ name }}</p>
    `;

    static props = {
        name: "Eli"
    };

    handleAction(action, key, value) {
        switch(action) {
            case "set":
                this[key] = value;
                break;
            default:
                break;
        }
    }
};
customElements.define("my-name", MyName);
</script>