I'm new to Ember and am using Ember.js 2.10. I'm trying to only use components instead of controllers. I'm trying to create a component that creates a list that is a list of links or just items and is sorted or not sorted based on the properties sent in. I have the link part working, but I can't seem to get the sort working without repeating a lot of code which makes me think I'm doing something wrong. I tried moving the sort logic into a computed property, but it doesn't work. If I don't specify a sortBy
property, it still sorts the list. If I do specify as sortBy
property, I don't get a list at all and the console.log shows what is returned as ComputedProperty.
This seems basic enough that I shouldn't have to do this, so if there is an Ember way of doing this, I'd like to know. Regardless, I'd like to understand what I'm doing wrong for the academic value of it.
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
<li>
</li>
<li>
</li>
app/templates/category/index.hbs
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',
}
];
Aucun commentaire:
Enregistrer un commentaire