vendredi 3 février 2017

ember.js component sort model based on if property is set

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