Sorting an array in a component

Question

I'm trying to pass results into a component and then have the component sort it:

// data passed to component
{
    type: 'people',
    res : [
      {name: 'charlie', age: '55'},
      {name: 'bobby', age: '19'},
      {name: 'raymond', age: '39'}
    ]
}

// component
App.ShowResultsComponent = Ember.Component.extend({

    // note sure how to set up array controller
    sorted : Ember.ArrayProxy.create({
        content : this.get('results.res')
    }),

)}

my jsbin

I'm not sure if I'm missing/misunderstanding some fundamental, but is it possible to include an array controller as a property in a component? Any clarification would be appreciated.

patmood · Accepted Answer · 2015-01-21 18:57:09Z

9

You can also extend the component with Ember.SortableMixin, then use arrangedContent as you normally would in a controller.

  App.ShowResultsComponent = Ember.Component.extend(Ember.SortableMixin, {

    ...

  });

Here is your JSBin updated for Ember 1.9.1 and using the Sortable Mixin

edited Jan 21, 2015 at 18:57

answered Jan 21, 2015 at 18:49

patmood

1,5751 gold badge12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

melc · Accepted Answer · 2014-10-21 07:05:15Z

Yes it is possible to instantiate an array controller as a computed property in order to take advantage of the sortable mixin functionality.

js

....
App.ShowResultsComponent = Ember.Component.extend({

  // not sure how to set up array controller
  sorted : function(){
    return Ember.ArrayController.create({
     content : this.get('results.res')
  });

  }.property(),

  actions: {
    sortAge: function(){
      this.get("sorted").set("sortProperties",["age"]);
      this.get("sorted").toggleProperty("sortAscending");
    },
    sortName: function(){
      this.get("sorted").set("sortProperties",["name"]);
      this.get("sorted").toggleProperty("sortAscending");
    }
  }

});
....

hbs

....
<h3>Sorted:</h3>
    <ul>
      {{#each sorted.arrangedContent}}
        <li>{{name}} -- {{age}}</li>      
      {{/each}}
    </ul>
....

http://emberjs.jsbin.com/bubiramuhi/1

Collectives™ on Stack Overflow

Sorting an array in a component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related