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