JSFiddle - React, Tailwind, and code Playground

by wmarbut

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<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>{{view.person.fullName}}</td>
            <td><button {{action removeItem target="view"}}>Delete</button>
        {{/view}}
    {{/each}}
</table>
</script>

JavaScript

App = Ember.Application.create();

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

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

App.PersonView = Ember.View.extend({
    tagName: 'tr',
    person: null,
    removeItem: function() {
        var person = this.get('person');
        App.peopleController.removeObject(person);
    }
});