EmberJS - Table multi-select

Using the latest build of Ember, create a multi-select table example.

by ddewaele

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
<script src="https://rawgithub.com/rpflorence/ember-localstorage-adapter/master/localstorage_adapter.js"></script>
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">

    <table>
    {{#each item in controller itemController="location"}}
        <tr>
        <td>{{view Ember.Checkbox checkedBinding="selected"}}</td>
        <td>{{item.id}}</td>
        </tr>
    {{/each}}
    </table>

    counter = {{editCounter}}
   <button {{action 'handleSelectedRecords'}}>Handle selected</button>
      
      <hr/>
      {{output}}

  </script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'App.LSAdapter'
});

App.LSAdapter = DS.LSAdapter.extend({
  namespace: 'locations-emberjs'
});

App.Location = DS.Model.extend({
    latitude: DS.attr('string'),
    longitude: DS.attr('string'),
    accuracy: DS.attr('string')

});


App.IndexRoute = Ember.Route.extend({
  model: function() {
      App.Location.createRecord({latitude:10,longitude:20});
App.Location.createRecord({latitude:30,longitude:40});

    return App.Location.find();
  }
});

/*
App.IndexController = Ember.ArrayController.extend({

  test: function() {
    console.log("test");
  }

});
*/

App.LocationController = Ember.ObjectController.extend({
  find: function() {
    var id = this.get("id");
    console.log("trying to find something for id - " + id);
      console.log("store = " + this.get("store"));
      console.log("content = " + this.get("content"));
      console.log("id  = " + this.get("content").id);
      console.log("title  = " + this.get("content").get("latitude"));
      return true;
  }


});

App.IndexController = Ember.ArrayController.extend({
  
  itemController: "Location",

  editCounter: function () {
    return this.filterProperty('selected', true).get('length');
  }.property('@each.selected'),

  handleSelectedRecords: function() {
    arr = this.filterProperty('selected', true);
    if (arr.length==0) {
        output = "nothing selected";
    } else { 
        output = "";
        for (i=0 ; i<arr.length ; i++) { 
            output += "found selected " + arr[i].get("id") + "\n" 
        }
       
    }
     this.set("output",output);                                                   
  },


 


});