can/demos/can-stache-bindings/reference.html

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

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

class MyDrivers extends StacheElement {
    static get view() {
        return `
            <ul>
                {{# for(driver of this.drivers) }}
                    <li on:click="this.select(driver)">
                        {{ driver.title }} {{ driver.first }} {{ driver.last }} - {{ driver.licensePlate }}
                    </li>
                {{/ for }}
            </ul>
        `;
    }

    static get props() {
        return {
            drivers: {
                get default() {
                    return [
                        { title: "Dr.", first: "Cosmo", last: "Kramer", licensePlate: "543210" },
                        { title: "Ms.", first: "Elaine", last: "Benes", licensePlate: "621433" }
                    ];
                }
            },

            selected: type.Any
        };
    }

    select(driver) {
        this.selected = driver;
    }
};

customElements.define("my-drivers", MyDrivers);

class EditPlate extends StacheElement {
    static get view() {
        return `<input value:from='this.plateName' on:input='this.update(scope.element.value)'/>`;
    }

    static get props() {
        return {
            plateName: type.maybeConvert(String)
        };
    }

    update(value) {
        this.plateName = value;
    }
};

customElements.define("edit-plate", EditPlate);

class MyDemo extends StacheElement {
    static get view() {
        return `
            {{ let editing=null }}
            <my-drivers selected:to="editing"/>
            <edit-plate plateName:bind="editing.licensePlate"/>
        `;
    }
};
customElements.define("my-demo", MyDemo);
</script>