CODEWITHSUNDEEP
ember.js
Grant Trevor
Grant Trevor

Reputation: 1062

arrangedContent not updating when using Ember.SortableMixin and child array

I've created a component to wrap the usage of jquery ui's sortable. I would like to use this component within a controller template by either passing the current model or a child of that model to the content property of my component.

Example usage:

{{#sortable-list tagName="ul" content=model.colours as |item|}}
  <li class="sortable-item" data-id={{item.id}}>{{item.sequence}} {{item.colour}} asd</li>
{{/sortable-list}}

The component uses Ember.SortableMixin to sort the component on initial load and uses the 'arrangedContent' property to iterate over this sorted collection.

This all works well until I add a new item to the collection, if I've passed the model directly it works as expected, if I've passed a child of the model nothing is updated.

I've created a jsbin as an example - when clicking "Add Colour" I would expect to see a new colour added to both lists, this however is not the case.

http://jsbin.com/wecozawigo/edit?html,js,output

Upvotes: 1

Views: 138

Answers (2)

locks
locks

Reputation: 6577

I suspect this is because you're mixing it into an Ember.Component, which doesn't wrap the content you're passing in in an ArrayProxy. This makes it not aware of the change events that the mixin sends out, like contentDidChange.

I came across http://blog.yanted.com/2015/03/17/ember-js-quick-tip-3-sorting-array-ember-way/ which might be an alternative workaround.

Upvotes: 0

Deewendra Shrestha
Deewendra Shrestha

Reputation: 2465

Seems like a bug, clearly proper observers are not getting triggered. A work around would be force it :

App.SortableListComponent = Ember.Component.extend(Ember.SortableMixin, {
  tagName: null,
  classNames: ['sortable'],
  sortProperties: ['sequence'],
  reSortOnContentChange: function(){    
    this.notifyPropertyChange('sortProperties');    
  }.observes('content.length')
});

Working jsbin : http://jsbin.com/muyatitudi/1/

Upvotes: 1

Related Questions