基于if属性设置的ember.js组件排序模型

Question

我是Ember的新手，正在使用Ember.js 2.10。我试图只使用组件而不是控制器。我试图创建一个组件，创建一个链接列表或只是项目的列表，并根据发送的属性排序或不排序。我有链接部分工作，但我似乎无法得到在不重复大量代码的情况下进行分类工作，这让我认为我做错了什么。我尝试将排序逻辑移入计算属性，但不起作用。如果我没有指定sortBy属性，它仍然会对列表进行排序。如果我确实指定为sortBy属性，我根本没有得到一个列表，并且console.log显示作为ComputedProperty返回的内容。

这似乎很基本，我不应该这样做，所以如果有一个Ember的方式做到这一点，我想知道。无论如何，我想了解我在做什么错误的学术价值。

app/components/column-list.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    tagName: 'ul', 
    classNames: ['column-list'], 
    sortedItems: Ember.computed('items', 'sortBy', function() { 
    if (this.get('sortBy') !== undefined) { 
     let sd = [ this.get('sortBy') ]; 
     return Ember.computed.sort(this.get('items'), sd); 
    } else { 
     return this.get('items'); 
    } 
    }), 
}); 

app/templates/components/column-list.hbs

{{#if sortBy}} 
    {{#each sortedItems as |item|}} 
    <li> 
     {{#if link}} 
     {{#link-to link item.id}} 
      {{yield item}} 
     {{/link-to}} 
     {{else}} 
     {{yield item}} 
     {{/if}} 
    </li> 
    {{/each}} 
{{else}} 
    {{#each items as |item|}} 
    <li> 
     {{#if link}} 
     {{#link-to link item.id}} 
      {{yield item}} 
     {{/link-to}} 
     {{else}} 
     {{yield item}} 
     {{/if}} 
    </li> 
    {{/each}} 
{{/if}} 

app/templates/category/index.hbs

{{#column-list class="categories" sortBy="title" link="category.show" items=model as |i|}} 
    {{i.title}} 
{{/column-list}} 

mirage/fixtures/category.js

export default [ 
    { 
    id: 'main-dishes', 
    title: 'Main Dishes', 
    }, { 
    id: 'cakes-pies-and-sweets', 
    title: 'Cakes, Pies & Sweets', 
    }, { 
    id: 'langappie', 
    title: 'Langappie', 
    }, { 
    id: 'dips-and-sauces', 
    title: 'Dips & Sauces', 
    }, { 
    id: 'meat-dishes', 
    title: 'Meat Dishes', 
    }, { 
    id: 'vegetable', 
    title: 'Vegetable', 
    }, { 
    id: 'seafood-dishes', 
    title: 'Seafood Dishes', 
    }, { 
    id: 'bread-and-cereals', 
    title: 'Bread & Cereals', 
    } 
]; 

更新：

我在重组后玩弄的是@Jovica制成，我收到“断言失败：排序定义‘sortedItems’上必须是一个函数或字符串数​​组”，所以我觉得我仍然有错误。 Link to twiddle

UPDATE2：

我发现，我在我的玩弄一个错字，并得到它的正常工作。 new twiddle有正确的修复。现在要弄清楚为什么在没有我询问的情况下，ember-mirage会订购数据，但那是一个不同的问题。

Answer 1

返还Ember.computed.sort宏没有做什么，你认为它是。你将不得不在Array类上使用排序方法。相关密钥也没有正确声明，如果要更新列表，它将是items.[]。

这里有一个建议的解决方案，更新时则传递到组件的变化排序关键字排序：

export default Ember.Component.extend({ 
    appName: 'Ember Twiddle', 
    dishes: foo, 
    sortedItems: Ember.computed.sort('dishes', 'sortBy') 

    didReceiveAttrs() { 
    if (this.get('sortBy')) { 
     this.set('sortBy', [ this.get('sortBy') ]); 
    else { 
     this.set('sortBy', []); 
    } 
    } 
}); 

下面是你需要的，因为当sortBy是一个空数组模板，将计算出的宏将不排序阵列：

{{#each sortedItems as |item|}} 
    <li> 
    {{#if link}} 
     {{#link-to link item.id}} 
     {{yield item}} 
     {{/link-to}} 
    {{else}} 
     {{yield item}} 
    {{/if}} 
    </li> 
{{/each}} 

Answer 2

试试这个

sortedItems: Ember.computed('items', 'sortBy', function() { 
    if (this.get('sortBy') !== undefined) { 
    let sd = this.get('sortBy'); 
    return this.get('items').sortBy(sd); 
    } else { 
    return this.get('items'); 
    } 
}), 

或较短的版本

sortedItems: Ember.computed('items', 'sortBy', function() { 
    let sortTerm = this.get('sortBy'), 
     items = this.get('items'); 
    return Ember.isBlank(sortTerm) ? items : items.sortBy(sortTerm); 
}