CODEWITHSUNDEEP
javascriptember.js
randombits
randombits

Reputation: 48450

Sort a collection in Ember.Controller

I'm inheriting some Ember.js code and for some reason the developer did not use Ember.ArrayController here, so I manually mixed in Ember.SortableMixin. Here's the code I'm trying to work with:

App.NflProjectionsController = Ember.Controller.extend(Ember.SortableMixin, {
  position: 'qb',
  site: 'FanDuel',

  type: 'nfl_weekly_projection',    
  isLoading: true,

  collection: [],

  isQB:     Ember.computed.equal('position', 'qb'),
  isWR:     Ember.computed.equal('position', 'wr'),
  isRB:     Ember.computed.equal('position', 'rb'),
  isTE:     Ember.computed.equal('position', 'te'),
  isK:      Ember.computed.equal('position', 'k'),
  isDEF:    Ember.computed.equal('position', 'def'),
  isFlex:   Ember.computed.equal('position', 'flex'),

  isFanDuel:     Ember.computed.equal('site', 'FanDuel'),
  isDraftKings:  Ember.computed.equal('site', 'DraftKings'),
  isDraftStreet: Ember.computed.equal('site', 'DraftStreet'),
  isFantasyAces: Ember.computed.equal('site', 'FantasyAces'),
  isDraftDay:    Ember.computed.equal('site', 'DraftDay'),

  actions: {
    choosePosition: function(type){
      this.set('collection', []);
      this.set('position', type);
    }, 

    chooseSite: function(type){
      this.set('collection', []);
      this.set('site', type);
    },

    sortBy: function(property) {
      this.set('sortProperties', [property]);
      this.set('sortAscending', !this.get('sortAscending'));
    }
  },

  positionObserver: function(){
    this.set('isLoading', true);
    var self = this;
    this.store.find(this.get('type'), {position: self.get('position'), site_id: self.get('site')}).then(function(collection){
      // console.log("here we are");
      if (self.get('collection').length == 0)
        self.set('collection', collection.toArray());
      self.set('isLoading', false);
    });
  }.observes('position').on('init'),

  siteObserver: function(){
    this.set('isLoading', true);
    var self = this;
    this.store.find(this.get('type'), {position: self.get('position'), site_id: self.get('site')}).then(function(collection){
      if (self.get('collection').length == 0)
        self.set('collection', collection.toArray());
      self.set('isLoading', false);
    });
  }.observes('site').on('init')

});

I created the sortBy function and am trying to figure out how I can sort the array that gets set to the controller's collection property. All the examples I've seen work directly with Ember.ArrayController. Is it possible to sort using this existing code and Ember.Controller?

Upvotes: 0

Views: 118

Answers (1)

Josh Padnick
Josh Padnick

Reputation: 3268

Is there a reason you don't want to just use an ArrayController? If your collection property can be thought of as the backing model for this page, then it would be standard practice to replace the collection property by populating the model property via the underlying route.

If you want to keep the existing page that you have, then you're on the right track with Ember.SortableMixin. Originally, I thought you need to use the Ember.ArrayProxy to take advantage of sortBy, but @Kingpin2k kindly pointed out in the comments that Ember actually extends the array prototype directly, so even this isn't necessary.

@Kingpin2k put together a nice jsbin that shows this in action:

http://emberjs.jsbin.com/gepeko/1/edit

Upvotes: 1

Related Questions