can/demos/can-stache-bindings/to-parent.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" main="@empty" id='demo-source'>
import { StacheElement, type } from "can";

class DriversList 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: "ASMAN" },
                            { title: "Ms.", first: "Elaine", last: "Benes", licensePlate: "621433" }
                    ];
                }
            },

            selected: {
                default: false,
								type: type.Any
            }
        };
    }

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


customElements.define("drivers-list", DriversList);


class EditPlate extends StacheElement {
    static get view() {
        return `
            <input value:from='this.plateName' on:input='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 }}
            <drivers-list selected:to="editing"></drivers-list>
            <edit-plate plateName:bind="editing.licensePlate"/>
        `;
    }
};
customElements.define("my-demo", MyDemo);
</script>