Databases
StackOverflow2013
Postsdbo
POBest way to update CollectionView content after jQuery UI Sortable?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBest way to update CollectionView content after jQuery UI Sortable?
    primarykey
    data
    text
    <p>I've been able to get jQuery UI Sortable working in Ember.js thanks to @ghemton's <code>safeClone</code> method: <a href="https://stackoverflow.com/questions/8797632/ember-js-jquery-ui-draggable-clone">Ember.js + jQuery UI Draggable Clone</a></p> <p>I'm having trouble letting Ember know of the change though once the sort has completed. Right now, I'm using <code>splice</code> as suggested in <a href="https://stackoverflow.com/questions/5306680/move-an-array-element-from-one-array-position-to-another">Move an array element from one array position to another</a> to move the item in the collection to its proper place. That works fine but I'm having an issue with window scrolling.</p> <p>In this jsfiddle, <a href="http://jsfiddle.net/chrisconley/g4aE6/" rel="nofollow noreferrer">http://jsfiddle.net/chrisconley/g4aE6/</a>, if you scroll to the bottom, then reorder any of the elements, the window jumps back to the top. If you put a breakpoint in between <code>propertyWillChange</code> and <code>propertyDidChange</code>, you can see that Ember is removing all of the items from the view momentarily, which is causing the window to jump back to the top.</p> <pre><code>App.MySortableView = Em.CollectionView.extend({ moveItem: function(fromIndex, toIndex){ var items = this.get('content'); this.propertyWillChange('content'); item = items.splice(fromIndex, 1)[0]; items.splice(toIndex, 0, item); this.propertyDidChange('content'); } }); </code></pre> <p>Is there a way to notify Ember of the change without it removing and replacing the entire collection?</p> <p><strong>Updated Solution:</strong></p> <p>(Thanks to Christopher Swasey's answer below)</p> <pre><code>App.MySortableView = Em.CollectionView.extend({ moveItem: function(fromIndex, toIndex){ var items = this.get('content'); item = items.objectAt(fromIndex); items.removeAt(fromIndex); items.insertAt(toIndex, item); } }); </code></pre> <p>Full example here: <a href="http://jsfiddle.net/chrisconley/NN35P/" rel="nofollow noreferrer">http://jsfiddle.net/chrisconley/NN35P/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USChris Conley
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBest way to update CollectionView content after jQuery UI Sortable?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBest way to update CollectionView content after jQuery UI Sortable?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POBest way to update CollectionView content after jQuery UI Sortable?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload