ember.js - 刷新 Ember.CollectionView 的 contentBinding 重新排序

Question

我有一个通过 contentBinding 绑定(bind)到 VenuesController 的 VenuesView。

window.VenuesView = Em.CollectionView.extend
  contentBinding: 'VenuesController'
  itemViewClass: VenueView

window.VenuesController = Em.SortableController.create
  content: [10, 11, 3, 101, 500, 2]

出于某种原因，排序/重新排序 VenuesController.content 不会更新页面，但对其进行的任何其他操作都会更新页面。

# Doesn't update DOM
VenuesController.set('content', VenuesController.get('content').sort())

# Updates DOM, but clears table and messes up users scroll position.
c = VenuesController.get('content').sort()
VenuesController.set('content', [])
VenuesController.set('content', c)

有人知道如何在重新排序内容后重新渲染 View 而不清空并重新填充数组吗？

Answer 1

如果您手动修改属性，您想使用 this.propertyWillChange('content')和propertyDidChange('content')排序前后。

App.Sortable = Ember.Mixin.create({
    sort: function() {
        this.propertyWillChange('content');
        this.get('content').sort( App.sort );
        this.propertyDidChange('content');
    }
});

App.venuesController = Ember.ArrayProxy.create(App.Sortable, {
    content: [10, 11, 3, 101, 500, 2]
});

---

我提出另一种方法:创建一个计算属性sorted它返回一个排序数组，并在项目更改或添加或删除值时自动更新，请参阅 http://jsfiddle.net/pangratz666/qqHf6/ :

App.Sorted = Ember.Mixin.create({
    sorted: function() {
        return this.get('content').sort(App.sort);
    }.property('@each')
});

App.venuesController = Ember.ArrayProxy.create(App.Sorted, {
    content: [10, 11, 3, 101, 500, 2]
});

---

另请参阅有关 Ember.js 命名约定的博客文章:http://www.emberist.com/2012/04/09/naming-conventions.html 。因此，像 Controller 这样的实例是小写的，而像 View 这样的类是大写的。