can/view/bindings/doc/reference.html

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

<div id='demo-html'>
<script id="app" type="text/stache">
<drivers {^selected}="*editing"/>
<edit-plate {(plate-name)}="*editing.licensePlate"/>
</script>
<script id='drivers-stache' type='text/stache'>
<ul>
  {{#each drivers}}
    <li ($click)="select(.)">
      {{title}} {{first}} {{last}} - {{licensePlate}}
    </li>
  {{/each}}
</ul>
</script>
</div>
<script src="../../../node_modules/steal/steal.js" main="@empty" id='demo-source'>
import can from "can";
import "can/view/autorender/autorender";
import "can/view/bindings/bindings";
import "can/view/stache/stache";
import "can/map/define/";

can.Component.extend({
	tag: "drivers",
	template: can.view("drivers-stache"),
	viewModel: {
		drivers: [
			{ title: "Dr.", first: "Cosmo", last: "Kramer", licensePlate: "543210" },
			{ title: "Ms.", first: "Elaine", last: "Benes", licensePlate: "621433" }
		],
		select: function(driver){
			this.attr("selected", driver);
		}
	}
});

can.Component.extend({
	tag: "edit-plate",
	template: can.stache("<input value='{{plateName}}' ($input)='update($element.val)'/>"),
	viewModel: {
		update: function(value){
			this.attr("plateName", value);
		}
	}
});

$("body").append( can.view("app",{}) );
</script>