title: EmberJS computed sort property conflicting with jQuery UI Sortable
body: <p>I am having an issue with getting drag-and-drop sort functionality with EmberJS working.</p>
  
  <p>The tutorials that cover this issue don't provide any help on the initial sort, which I am doing through a computed property.</p>
  
  <p>What I'm encountering seems to be a race condition between ember's rerender when the <code>sortedItems</code> computed property changes and jQueryUI Sortable updating the DOM. List Items get duplicated, or disappear altogether upon sorting.</p>
  
  <h2>Route</h2>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Route.extend({
    model: function() {
      return Ember.Object.create({
        id: 1,
        title: "Title",
        subtitle: "Subtitle",
        items: [
          Ember.Object.create({
            name: "Item 2",
            sortOrder: 2,
            id: 1
          }),
          Ember.Object.create({
            name: "Item 1",
            sortOrder: 1,
            id: 2
          }),
          Ember.Object.create({
            name: "Item 3",
            sortOrder: 3,
            id: 3
          })
        ]
      });
    }
  });
  </code></pre>
  
  <h2>Controller</h2>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.ObjectController.extend({
  
    sortProperties: [ 'sortOrder' ],
    sortedItems: Ember.computed.sort('model.items', 'sortProperties'),
  
    actions: {
      updateSortOrder: function(indexes) {
        this.get('items').forEach(function(item) {
          var index = indexes[item.get('id')];
          item.set('sortOrder', index);
        });
      }
    }
  
  });
  </code></pre>
  
  <h2>View</h2>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.View.extend({
  
    didInsertElement: function() {
      var controller = this.get('controller');
  
      this.$(".item-list").sortable({
        update: function(event, ui) {
          var indexes = {};
  
          $(this).find('li').each(function(index) {
            indexes[$(this).data('id')] = index;
          });
  
          controller.send('updateSortOrder', indexes);
        }
      })
    }
  });
  </code></pre>
  
  <h2>Template</h2>
  
  <pre><code>&lt;h1&gt;{{ title }}&lt;/h1&gt;
  &lt;h2&gt;{{ subtitle }}&lt;/h2&gt;
  
  &lt;ul class="item-list"&gt;
    {{#each item in sortedItems }}
      &lt;li data-id="{{ unbound item.id }}"&gt;
        name: {{ item.name }}&lt;br /&gt;
        sortOrder: {{ item.sortOrder }}&lt;br /&gt;
        id: {{ item.id }}
      &lt;/li&gt;
    {{/each}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's a Barebones Ember app that reproduces the issue: <a href="https://github.com/silasjmatson/test-sortable" rel="nofollow">https://github.com/silasjmatson/test-sortable</a></p>
  
  <h2>Question</h2>
  
  <p>Is there a way to avoid this race condition or sort only once when the controller is initialized?</p>
  
  <p><em>Apologies if there is already an answer on the interwebs for this. I haven't been able to resolve this despite a week of searching/experimenting.</em></p>