Ember.js Base fiddle

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name='app'>
    <ul id='sort-target'>
        {{#each content}}
        <li>{{title}}</li>
        {{/each}}                
    </ul>
    <a href='#' {{action removeItem target="controller"}}>Remove Second Item</a>
</script>

JavaScript

App = Ember.Application.create({
    ApplicationController: Ember.ArrayController.extend({
        content: [{id: 1, title:'Test 1'},{id: 2, title:'Test 2'},{id: 3, title:'Test 3'}],
        removeItem: function() {
             this.removeAt(1);        
        }            
    }),
    ApplicationView: Ember.View.extend({
        templateName: 'app', 
        didInsertElement: function() {
             $('#sort-target').sortable().disableSelection();               
        }
    }),
    
    Router: Ember.Router.extend({
        location: Ember.Location.create({implementation: 'hash'})   ,         
        root: Ember.Route.extend({
            route: '/'
        })            
    })
});
App.location = Ember.Location.create({implementation: 'hash'})

App.initialize()