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

<ul id="sort-container">
{{#each content}}
    <li>{{title}}</li>
{{/each}}
</ul>

Sorting works fine, until one of the bindings needs to update. The problem is that each <li> gets surrounded by ember's infamous metamorph <script> tags. See the actual DOM generated in this image

Is there an easy way to make these two play nicely together?

Is there a way to force the view to repaint? I could easily implement that after the sortable deactivate event is fired.

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

<ul id="sort-container">
{{#each content}}
    <li>{{title}}</li>
{{/each}}
</ul>

Sorting works fine, until one of the bindings needs to update. The problem is that each <li> gets surrounded by ember's infamous metamorph <script> tags. See the actual DOM generated in this image

Is there an easy way to make these two play nicely together?

Is there a way to force the view to repaint? I could easily implement that after the sortable deactivate event is fired.

• javascript
• jquery
• jquery-ui
• ember.js
• jquery-ui-sortable

• a view can be repaint by calling rerender() on it. But keep in mind that the metamorphs are responsible of the bindings stuff. So removing them seems to be a bad smell. Could you provide a jsfiddle witch illustrate the problem ? – sly7_7 Commented Jul 31, 2012 at 21:11
• @sly7_7 Here is a fiddle jsfiddle/wmarbut/8VMdz. To exemplify the problem first just run it and click the link to remove an item. Then re-run, change the order more than once, and click the link to remove an item. It will sometimes remove 2 or all because the metamorphs no longer line up with the <li> that they were binding – wmarbut Commented Jul 31, 2012 at 21:27

1 Answer 1

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

handlebars:

<script type="text/x-handlebars">
  {{view App.JQuerySortableView content=model}}
  <a {{action removeItem}}>Remove Second Item</a>
</script>

<script type="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();
    }
});

​