Glimmer and Jqueryui sortable

[dmagunov]

Hello!

I have some issues with working together new Ember engine and jqueryui sortable plugin. My structure (example):

Model Project:

itemSorting: ['sort']
itemSorted: Ember.computed.sort('item_ids','itemSorting'))

Model Item:

project_id: DS.attr('belongsTo', 'project', {async:true})

Template:

{{#jqui-sortable}}
{{#each project.itemSorted as |item index|}}
  {{item-element  index=index }}
 {{/each}} 
{{/jqui-sortable}}

So after sorting - jqui-sortable component sends action to route with new indexes of each item and route saves models and pushes new sort properties to store. So problem is that sometimes glimmer engine doesn't properly rendered sorted list. Indexes inside "each" are correct but display order of items isn't. I think that it caused by dom manipulation of item list (changing order of item (LI) list) by sortable plugin. My question is how to tell glimmer engine to forcev rerender this list (component.rerender() doesn't help)?

[taras]

What's the problem? :)

[dmagunov]

Hello, I've updated my question)

[taras]

@dmagunov if you're using Ember 1.13.2+, you can specify key="@index" on your {{each}} helper. Like this

{{#jqui-sortable}}
{{#each project.itemSorted key="@index" as |item index|}}
  {{item-element  index=index }}
 {{/each}} 
{{/jqui-sortable}}

This will use item's index in the array to order the elements in each.

[dmagunov]

Thanks Taras, yes I'm using 1.13.5 and already try this but it doesn't helped me. I've made video to illustrate this issue https://youtu.be/UFIjX_YHoP0

[dmagunov]

And if I've directly update sort property - all works as expected. https://youtu.be/CbcHUHU7ykw

[taras]

@dmagunov thanks for linking to that issue