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

更新2：

我发现我的旋转中有一个拼写错误并让它正常工作。 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);
}