在内容绑定重新排序时刷新Ember.CollectionView [英] Refresh Ember.CollectionView on contentBinding reordering

问题描述

我有一个 VenuesView 通过contentBinding绑定到 VenuesController 。

I have an VenuesView bound to VenuesController through contentBinding.

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

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

由于某些原因排序/重新排序 VenuesController.content 不更新页面，但是其他任何操作都可以。

For some reason sorting / reordering VenuesController.content doesn't update the page, but any other operation on it does.

# 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)

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

Does anyone know how to re-render the view after reordering content without emptying and repopulating the array?

推荐答案

如果您手动修改属性，则要使用 this.propertyWillChange（'content'）和 propertyDidChange（'content'）排序之前和之后。

If you modify a property manually you want to use this.propertyWillChange('content') and propertyDidChange('content') before and after the sorting.

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/ ：

---

I propose another way: create a computed property sorted which returns a sorted array and is automatically updated when the item's change or values are added or removed, see 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-convention.html 。所以像你的控制器这样的实例是lowerCase，像你的视图的类是UpperCase。

---

Also have a look at the blog post about Ember.js naming conventions: http://www.emberist.com/2012/04/09/naming-conventions.html . So instances like your controller are lowerCase and classes like your view are UpperCase.

这篇关于在内容绑定重新排序时刷新Ember.CollectionView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！