JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<script src="http://flamejs.github.com/flame-address-book/js/libs/flame_with_github_image_urls.min.js"></script>
<script type="text/x-handlebars">
    {{view App.RootView}}
</script>

CSS

/* If you want to use absolute positioning for child views
 * inside the list item view, you have to use relative
 * positioning for the item view to make things look right.
 * Also then you need to define the item height in CSS
 * (currently only absolutely positioned items support defining
 * their dimensions with the 'layout' property in JS).
 * Also consider using Flame.StackView instead of ListView.
 */
.flame-list-item-view {
    position: relative;
    height: 17px;
}

JavaScript

/* An example of using Flame.ListView. You can reorder items by
 * dragging them around in the list. This example illustrates also a 
 * few other concepts:
 *  - Using absolute positioning for child views inside the item views
 *  - Using SortingArrayProxy to update a property on the items
 *    whenever their position in the list changes (handy for 
 *    persisting the position)
 *  - Using 'payload' for a button
 */

App = Ember.Application.create();

App.Person = Ember.Object.extend({
    firstname: null,
    lastname: null,
    position: null
});

App.persons = [
    App.Person.create({ position: 0, firstname: 'John', lastname: 'Doe' }),
    App.Person.create({ position: 4, firstname: 'John', lastname: 'Smith' }),
    App.Person.create({ position: 3, firstname: 'Jane', lastname: 'Doe' }),
    App.Person.create({ position: 1, firstname: 'Lisa', lastname: 'Doe' }),
    App.Person.create({ position: 2, firstname: 'James', lastname: 'Smith' })
];

App.personsController = Ember.Object.create({
    all: Flame.SortingArrayProxy.create({
        sortKey: 'position',
        source: App.persons
    }),
    
    selected: null,  // Reflects currently selected person
    
    // We get the person to delete as the 'payload' from the button
    // (it's not the same thing as the selected person)
    delete: function(person) {
        this.get('all').removeObject(person);
    }
});

App.RootView = Flame.RootView.extend({
    childViews: ['listView'],

    listView: Flame.ListView.extend({
        contentBinding: 'App.personsController.all',
        selectionBinding: 'App.personsController.selected',
        allowReordering: true,  // Set to false to disallow reordering
        itemViewClass: Flame.ListItemView.extend({
            childViews: ['nameView', 'deleteButtonView'],
            
            nameView: Flame.LabelView.extend({
                layout: { left: 5, top: 1, right: 25 },
                handlebars: '{{parentView.content.position}}....