Ember.js And Jquery Sortable. How To Work Around The Metamorph Scripts

I have an ember.js app that I would like to use jquery ui's sortable widget on. My view looks like

{{#each content}}
• {{title}}

  Solution 1:

  It seems to me that using Ember.CollectionView, could solve this. So I gave a try. It seems to work: http://jsfiddle.net/8ahjd/

  handlebars:

  <scripttype="text/x-handlebars">
    {{view App.JQuerySortableView content=model}}
    <a {{actionremoveItem}}>Remove Second Item</a></script><scripttype="text/x-handlebars"data-template-name='jquery-sortable-item'>
    {{view.content.title}}
  </script>

  javascript:

  App = Ember.Application.create();
  
  App.ApplicationController = Ember.ArrayController.extend({
    removeItem: function() {
      this.removeAt(1);        
    }            
  });
  
  App.ApplicationRoute = Ember.Route.extend({
    model: function() {
      return [
        {id: 1, title:'Test 1'},
        {id: 2, title:'Test 2'},
        {id: 3, title:'Test 3'}
      ];
    }
  });
  
  App.JQuerySortableItemView = Ember.View.extend({
      templateName: 'jquery-sortable-item'        
  });
  
  App.JQuerySortableView = Ember.CollectionView.extend({
      tagName: 'ul',
      itemViewClass: App.JQuerySortableItemView, 
  
      didInsertElement: function(){
          this._super();
          this.$().sortable().disableSelection();
      }
  });
  

  ​

Share