Question

我已经创建了一个组件来包装jquery ui的可排序用法。我想在控制器模板中使用此组件，方法是将当前模型或该模型的子项传递给组件的content属性。

使用示例：

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

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

这一切都很有效，直到我向集合中添加一个新项目，如果我直接通过模型它按预期工作，如果我已经通过模型的子项没有更新。

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

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

Answer 1

看起来像一个错误，显然正确的观察者没有被触发。一个解决办法就是强迫它：

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

工作jsbin：http://jsbin.com/muyatitudi/1/

Answer 2

我怀疑这是因为你将它混合到Ember.Component中，而ArrayProxy没有包含你在contentDidChange中传入的内容。这使得它不知道mixin发出的更改事件，例如{{1}}。

我遇到了http://blog.yanted.com/2015/03/17/ember-js-quick-tip-3-sorting-array-ember-way/，这可能是另一种解决方法。

使用Ember.SortableMixin和子数组时，arrangeContent不更新

2 个答案: