JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
<table>
  {{#each App.peopleController}}
    {{#view App.PersonView personBinding="this"}}
      <td {{bindAttr data-id="person.id"}}{{action "play" on="click"}}>{{person.fullName}}</td>
    {{/view}}
  {{/each}}
</table>
</script>

JavaScript

App = Ember.Application.create();

App.Person = Ember.Object.extend({
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName') 
});

App.peopleController = Ember.ArrayProxy.create({
    content: [App.Person.create({ id: 1, firstName: "Yehuda", lastName: "Katz" }),
              App.Person.create({ id: 2, firstName: "Tom", lastName: "Dale" })]
});

App.PersonView = Ember.View.extend({
    tagName: 'tr',
    removeItem: function() {
        var person = this.get('person');
        App.peopleController.removeObject(person);
    },
    play: function(e) {
       var id = $(e.target).closest("td").data("id");
        console.info(id);
    }
});