ember.jsコンポーネントのソートモデルがifプロパティに基づいて設定されています

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』のソート定義アサーションに失敗しました」を取得していますという責めをtwiddledまだ何かが間違っています。 Link to twiddle

アップデート2：

私は私の責めにタイプミスを持っていたし、それが正常に動作してしまったことがわかりました。 new twiddleには正しい修正があります。今私は尋ねることなくエバーミラージュがデータを注文する理由を理解することができますが、それは別の問題です。

Answer 1

Ember.computed.sortマクロを返すこの

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

たり短くしてみてください、あなたはそれが何を考えてやっていません。 Arrayクラスのsortメソッドを使用する必要があります。依存キーも正しく宣言されていないため、リストを更新する場合はitems.[]になります。

ここでコンポーネントの変更に渡されたソートするたびにソート・キーを更新提案ソリューションです：sortByは空の配列であるとき、計算されたマクロがないので

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

そして、ここではあなたが必要とするテンプレートは、です配列を並べ替える：

{{#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() { 
    let sortTerm = this.get('sortBy'), 
     items = this.get('items'); 
    return Ember.isBlank(sortTerm) ? items : items.sortBy(sortTerm); 
}