在EmberJS中排序列表并在视图中反映出来

问题描述

我有一个计算属性，应该排序& fiter like so：

  sortedFilteredChildren：function（）{
 console.log（sortedFilteredChildren（））; 
 var filtered = this.get（children）。filterProperty（archived，false）; 
 var sorted = filtered.slice（）。sort（function（a，b）{
 return a.get（order） -  b.get（order）; 
} ）; 
返回排序; 
} .property（@ each.order，@ each.parent_id，EpicApp.filterOptions.viewArchived）。cacheable（），
  

我正在使用该属性作为CollectionView的数据源

如果我更改一个这是一个孩子，这个属性没有得到重新评估。换句话说，在执行以下操作后，我看不到console.log行出现：

  child.set（order ，10）; 
  

任何想法我在做错什么？

解决方案

最后想出了这个...

我以为@each应用于返回的值。即，如果返回值中对象上的任何一个订单属性发生更改，然后重新评估。

但这是不正确。 @each应用于计算属性所对应的对象。

所以要做我需要的，我不得不做一个孩子@每个。

  sortedFilteredChildren：function（）{
 console.log（sortedFilteredChildren（））; 
 var filtered = this.get（children）。filterProperty（archived，false）; 
 var sorted = filtered.slice（）。sort（function（a，b）{
 return a.get（order） -  b.get（order）; 
} ）; 
返回排序; 
} .property（children. @ each.order，children。@ each.parent_id，EpicApp.filterOptions.viewArchived）。cacheable（），
  

I have a computed property that should sort & fiter like so:

sortedFilteredChildren: function() {
        console.log("sortedFilteredChildren()");
        var filtered = this.get("children").filterProperty("archived",false);
        var sorted = filtered.slice().sort(function(a,b){
            return a.get("order") - b.get("order");
        });
        return sorted;
}.property("@each.order","@each.parent_id","EpicApp.filterOptions.viewArchived").cacheable(),

I'm using that property as the data source of a CollectionView

If I change the order property of one of it's children, this property does not get re-evaluated. In other words, I don't see the console.log line appear after doing a:

child.set("order",10);

Any idea what I'm doing wrong?

解决方案

Finally figured this out...

I thought @each applied to the returned value. ie, if any of the order properties on objects in the return value changed then re-evaluate.

But that's not correct. @each applies to the object the computed property is on.

So to do what I needed, I had to do a "[email protected]"

sortedFilteredChildren: function() {
    console.log("sortedFilteredChildren()");
    var filtered = this.get("children").filterProperty("archived",false);
    var sorted = filtered.slice().sort(function(a,b){
        return a.get("order") - b.get("order");
    });
    return sorted;
}.property("[email protected]","[email protected]_id","EpicApp.filterOptions.viewArchived").cacheable(),

这篇关于在EmberJS中排序列表并在视图中反映出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！