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

我是Ember的新手，正在使用Ember.js 2.10。我试图只使用组件而不是控制器。我正在尝试创建一个组件，该组件创建一个列表，该列表是链接列表或项目列表，并根据发送的属性进行排序或不排序。我有链接部分在工作，但我似乎无法在不重复大量代码的情况下让排序工作，这让我觉得我做错了什么。我尝试将排序逻辑移动到计算属性中，但不起作用。如果我没有通过属性指定

排序，它仍然会对列表进行排序。如果我确实指定为
sortBy
属性，我根本不会得到列表，并且console.log会显示作为ComputedProperty返回的内容

这似乎足够基本，我不应该这样做，所以如果有一个余烬这样做的方式，我想知道。不管怎样，我想知道我做错了什么，因为它的学术价值

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');
    }
  }),
});

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',
  }
];

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}}

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

mirage/fixtures/category.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');
    }
  }),
});

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'的排序定义必须是一个函数或字符串数组”，所以我认为我仍然有一些错误

更新2：

我发现我的玩偶有一个打字错误，并使它正常工作。这个问题得到了正确的解决。现在，我想知道为什么ember mirage会在我不问的情况下订购数据，但这是另一个问题。
试试这个

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);
}

返回
Ember.computed.sort
宏的操作与您认为的不同。您必须在Array类上使用sort方法。从属密钥也没有正确声明，如果要更新列表，它将是
项。[]

下面是一个建议的解决方案，它可以在传递到组件中的排序键发生更改时更新排序：

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}}

{{{#每个被分类的数据项为|项}

{{{#如果链接}}
{{{#链接到link item.id}
{{yield item}}
{{/链接到}
{{else}
{{yield item}}
{{/if}

{{/每个}}
我让它在这里工作，但后来我忘记了这个
排序方法在..但是我不确定返回
返回余烬.computed.sort
模式。这是行不通的，我们也不应该这样做。我的假设是对的吗？@kumkanillam我不太确定，但我认为它可以使用，但没有必要，因为sortBy方法更适合这个例子。谢谢。在您的简短版本中，包括返回result@kumkanillam谢谢，我不确定三元运算符是否隐式返回？@JovicaŠuša我知道sortBy是Ember.Array的方法，你能解释一下什么时候使用Ember.Array.sortBy（）和Ember.computed.sort（）吗？Ember.computed.sort（）只是Ember.computed（Ember.Array.sortBy（））的缩写吗？欢迎来到Stackoverflow！我建议您编写而不是粘贴长代码。通过这样做，许多回答者可以使用您的代码。关于控制器，您可能需要阅读以下文档：@locks我知道控制器将保留一些更改。此代码似乎是组件的完美候选，因为它可以在应用程序中多次重用。你不同意吗？我只是想确保我理解你的评论。这样我才能理解你的解决方案和@Jovica是说，如果我传入一个新的sortBy而不必重新加载页面（就像一个带有操作的排序按钮），那么这段代码将使用列表？如果一个新的列表项被异步添加到Ember数据中（web套接字或其他东西），或者一个重命名的项，列表会自动更新并排序，而另一个不会（我知道Ember可以在数据更改时更新DOM，但我还不知道如何做）？