can/demos/can-stache-bindings/two-way.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 { Component } from "can";

Component.extend({
	tag: "my-drivers",
	view: `
		<ul>
			{{# for(driver of this.drivers) }}
				<li on:click="this.select(driver)">
					{{ driver.title }} {{ driver.first }} {{ driver.last }} - {{ driver.licensePlate }}
				</li>
			{{/ for }}
		</ul>
	`,
	ViewModel: {
		drivers: {
			default: function() {
				return [
					{ title: "Dr.", first: "Cosmo", last: "Kramer", licensePlate: "543210" },
					{ title: "Ms.", first: "Elaine", last: "Benes", licensePlate: "621433" }
				];
			}
		},
		selected: "any",
		select: function(driver){
			this.selected = driver;
		}
	}
});


Component.extend({
	tag: "edit-plate",
	view: `
		<input on:input:value:bind='this.plateName'/>`,
	ViewModel: {
		plateName: "string",
		update: function(value){
			this.plateName = value;
		}
	}
});

Component.extend({
	tag: 'my-demo',
	view: `
		<my-drivers selected:to="editing"/>
		<edit-plate plateName:bind="editing.licensePlate"/>
	`
})
</script>