Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    table, table td {
      border: 1px solid #ccc;
      border-collapse: collapse;
      padding: 5px;
    }
  </style>
</head>
<body>
  
  <script type="text/x-handlebars">
     <h3>Test Data</h3>
     {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
    <table>
      <tr>
        <td>&nbsp;</td>
        <td>ID</td>
        <td>Name</td>
        <td>Description</td>
      </tr>
      {{#each}}
        <tr>
          <td>{{input type="checkbox" checked=isSelected}}</td>
          <td>{{id}}</td>
          <td>{{name}}</td>
          <td>{{description}}</td>
        </tr>
      {{/each}}
    </table>
    <br />
    <button {{action "removeSelected"}}>Remove selected</button>
  </script>
  
</body>
</html>
 
var App = Ember.Application.create();
​
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      {
        id: 1,
        name: "test 1",
        description: "this is the first test."
      },
      {
        id: 2,
        name: "test 2",
        description: "this is the second test."
      }
    ];
  }
});
​
App.IndexController = Ember.ArrayController.extend({
  itemController: 'IndexItem',
  actions: {
    removeSelected: function() {
      this.removeObjects(this.filterProperty('isSelected'));
    }
  }
});
​
App.IndexItemController = Ember.ObjectController.extend({
  isSelected: false
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers