JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script type="text/x-handlebars" data-template-name="persons">
    {{view Ember.TextField valueBinding="controller.newPerson"}}
    <button {{action create}}>create</button>
    <table>
        <tr>
            <th>pos</th>
            <th>name</th>
            <th>up</th>
            <th>down</th>
        </tr>
        {{#each person in controller.arrangedContent}}
        <tr>
            <td>{{person.orderNum}}</td>
            <td>{{person.name}}</td>
            <td><button {{action up person}}>up</button></td>
            <td><button {{action dn person}}>dn</button></td>
        </tr>
        {{/each}}
    </table>
</script>

CoffeeScript

window.App = Ember.Application.create()

App.Person = Em.Object.extend
    orderNum: null
    name: 'default'

App.Person.reopenClass
    find: () ->
        return [App.Person.create(name: 'teddy', orderNum: 0), 
                App.Person.create(name: 'suxy', orderNum: 1),
                App.Person.create(name: 'blarmy', orderNum: 2)]
    
App.Router.map () ->
    @resource "persons"

App.IndexRoute = Em.Route.extend
    redirect: () ->
        @transitionTo "persons"

App.PersonsRoute = Em.Route.extend
    setupController: (controller) ->
        controller.set "content", App.Person.find()
        
App.PersonsController = Em.ArrayController.extend
    content: []
    newPerson: ""
    sortProperties: ['orderNum']
    sortAscending: true
    
    create: () ->
        newName = @get('newPerson')
        newPos = @get('content').toArray().length
        @pushObject(App.Person.create(name: newName, orderNum: newPos))
        @set "newPerson", ""
    
    up: (person) ->
        sorted = @get('arrangedContent')
        targetPos = person.get('orderNum') - 1
        target = sorted.objectAt(targetPos)
        if target?
            target.incrementProperty('orderNum')
            person.decrementProperty('orderNum')
        else console.log "at top"
        
    dn: (person) ->
        sorted = @get('arrangedContent')
        targetPos = person.get('orderNum') + 1
        target = sorted.objectAt(targetPos)
        if target?
            target.decrementProperty('orderNum')
            person.incrementProperty('orderNum')
        else console.log "at bottom"