Flame.ListView Touch Support

Right now it doesn't work at all. :S

by pjmorse

HTML

<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js"></script>
<script src="https://github.com/downloads/pjmorse/flame.js/flame-201210132059.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,
  ...