Ember.js 使用Ember.SortableMixin和子数组时arrangedContent不更新

我已经创建了一个组件来包装jQueryUI的sortable的用法。我希望通过将当前模型或该模型的子模型传递给我的组件的内容属性，在控制器模板中使用该组件

用法示例：

{{#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}}

{{{#可排序列表标记名=“ul”content=model.colors as | item |}
{{item.sequence}{{item.color}}asd
{{/可排序列表}

该组件使用Ember.SortableMixin在初始加载时对组件进行排序，并使用“arrangedContent”属性迭代此排序的集合

在我向集合添加一个新项之前，这一切都可以正常工作，如果我直接传递了模型，它会按预期工作，如果我传递了模型的子项，则不会更新任何内容

我创建了一个jsbin作为示例—当单击“添加颜色”时，我希望看到两个列表中都添加了一种新颜色，但事实并非如此

---

似乎是一个bug，显然没有触发合适的观察者。一个解决办法是强迫它：

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

---

工作jsbin:

我怀疑这是因为您将其混合到

Ember.Component

中，而该组件不会将您传递的内容包装在

ArrayProxy

中。这使得它不知道mixin发出的更改事件，比如

contentDidChange

我发现这可能是另一种解决方法