Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="statsForTeam">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
​
  
<div id='out'></div>
​
  
<script id="app" type="text/stache">
<driver-select {^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>
  
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//canjs.com/release/2.3.7/can.jquery.js"></script>
<script src="//canjs.com/release/2.3.7/can.stache.js"></script>
</body>
</html>
 
can.Component.extend({
    tag: "driver-select",
    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.value)'/>"),
    viewModel: {
        update: function(value){
            this.attr("plateName", value);
        }
    }
});
​
$("#out").html( can.view("app",{}) );
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x