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">
  {{#each teams}}
    <h2>Name: {{.}}</h2>
    <ul>
    {{#each statsForTeam(.)}}
      <li>{{value}}</li>
    {{/each}}
    </ul>
  {{/each}}
  <h2>Add Stat</h2>
  
  <form ($submit)="formAddStat(%element, %event)">
    Team: <select name='team'>
      <option value="red">Red</option>
      <option value="blue">Blue</option>
    </select>
    Value <input name='value'/>
    <input type='submit'/>
  </form>
</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>
 
​
​
​
Game = can.Map.extend({
  statsForTeam: function(teamName){
    return this.attr("stats").filter(function(stat){
      return teamName === stat.attr("team")
    })
  },
  formAddStat: function(form, event){
    event.preventDefault();
    this.addStat(form.team.value,
                form.value.value)
  },
  addStat: function(team, value){
    this.attr("stats").push({
      team: team, value: value
    })
  }
});
​
game = new Game({
  teams: ["red","blue"],
  stats: [
    {team: "red", value: "5pt"},
    {team: "blue", value: "2pt"},
    {team: "red", value: "3pt"},
    {team: "blue", value: "1pt"}
  ]
});
​
$("#out").html( can.view("app",game) );
​
// color li's to prove they are not
// re-rendered when adding stats
$("li").css("background-color","yellow")
​
​
Output

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

Dismiss x