Ember.js 0.9.5 JQuery UI Sortable

by Aras Balali Moghaddam

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<h1>Items</h1>
<script type="text/x-handlebars"> 
  {{#collection "App.MySortableView"}}
    {{content.name}}
  {{/collection}}
</script>

JavaScript

$.fn.extend({
  safeClone: function() {
    var clone;
    clone = $(this).clone();
    clone.find('script[id^=metamorph]').remove();
    clone.removeClass('ember-view');
    clone.find('*').each(function() {
      var $this;
      $this = $(this);
      $this.removeClass('ember-view');
      return $.each($this[0].attributes, function(index, attr) {
        if (attr.name.indexOf('data-bindattr') === -1) {
          return;
        }
        return $this.removeAttr(attr.name);
      });
    });
    if (clone.attr('id') && clone.attr('id').indexOf('ember') !== -1) {
      clone.removeAttr('id');
    }
    
    clone.find('[id^=ember]').removeAttr('id');
    return clone;
  }
});

window.App = Ember.Application.create({
    ready: function() {}
});

App.Item = Ember.Object.extend({
});

App.MySortableView = Em.CollectionView.extend({
    tagName: "ul",
    content: [
        App.Item.create({
        name: "Animal"
    }),
        App.Item.create({
        name: "Android"
    }),
        App.Item.create({
        name: "Human"
    })
        ],
    didInsertElement: function() {
        var view = this;
        view.$().sortable({
            stop: function(event, ui) {
                console.log('saving');
            },
            helper: function(event, ui) {
                return $(ui).safeClone();            
            }
        })
    }
})