Question

我通过contentBinding与VenuesView绑定了VenuesController。

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)

有没有人知道在重新排序内容后如何重新渲染视图而不清空和重新填充数组？

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。所以像你的控制器这样的实例是lowerCase，像你的视图这样的类是UpperCase。

Answer 2

您是否尝试过调用contentWillChange，然后再在控制器上调用contentDidChange？

刷新内容绑定重新排序的Ember.UICollectionView

2 个答案: