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所做的蠢事，我得到了＆＃34;断言失败：＆＃39; sortedItems＆＃39;的排序定义on必须是一个函数或一个字符串数组＆＃34;，所以我想我还有一些错误。 Link to twiddle

UPDATE2：

我发现我的旋风中有一个拼写错误，并使其正常工作。 new twiddle有正确的解决方法。现在要弄清楚为什么ember-mirage在没有我询问的情况下订购数据，但这是一个不同的问题。

Answer 1

返回Ember.computed.sort宏并不是你想象的那样。您必须在Array类上使用sort方法。依赖键也未正确声明，如果要更新列表，则为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);
}

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

2 个答案: