title: Passing 'Range' header in Ember
body: <p>Our team is learning and adopting Ember to build our applications and it's been an amazing journey. It's come to a point where I need to fetch data progressively with an infinite scroll list that automatically fetch the next page as soon as the user scrolls to the bottom most of the list. Our REST endpoint is expecting a Range header to be passed to do this, otherwise it returns max 1000 records.</p>
  
  <p>So far I have found that I can specify the header in our model-specific Adapter class, like the following:</p>
  
  <pre><code>App.TaskAdapter = DS.RESTAdapter.extend({
      headers: function() {
          return {
              'Range': 'items=0-9'
          };
      }
  });
  </code></pre>
  
  <p>Since the range needs to change based on which page the application needs to load next, I modified the class to be like this:</p>
  
  <pre><code>App.TaskAdapter = DS.RESTAdapter.extend({
      pageIndex: 0,
      numRecords: 10,
  
      headers: function() {
          var pageIndex = this.get('pageIndex');
          var numRecords = this.get('numRecords');
          var rangeValue = 'items=' + (pageIndex * numRecords) + '-' + (((pageIndex + 1) * numRecords) - 1);
          return {
              'Range': rangeValue
          };
      }.property().volatile()
  });
  
  App.TasksRoute = Ember.Route.extend({
      ...
  
      refreshModel: function(pageIndex) {
          this.adapter.set('pageIndex', pageIndex);
          this.store.find('task');
      },
  
      ...
  });
  </code></pre>
  
  <p>With this modification, I was hoping that I could modify the <code>pageIndex</code> and <code>numRecords</code> by doing this in the Route (which led me to injecting the <code>App.TaskAdapter</code> into the <code>App.TasksRoute</code>). However, I found that the <code>this.adapter.set('pageIndex', pageIndex);</code> doesn't set the value as intended, which led me to think that adapter is instantiated (from a factory?) everytime the store needs to fetch data. I might be completely wrong on this.</p>
  
  <p>So since I can't make it work, I ended up having a helper class <code>TaskAdapterConfig</code> (which is injected into the route) to do the deed.</p>
  
  <pre><code>App.TaskAdapter = DS.RESTAdapter.extend({
      pageIndex: 0,
      numRecords: 10,
  
      headers: function() {
          var pageIndex = this.config.get('pageIndex');
          var numRecords = this.config.get('numRecords');
          var rangeValue = 'items=' + (pageIndex * numRecords) + '-' + (((pageIndex + 1) * numRecords) - 1);
          return {
              'Range': rangeValue
          };
      }.property().volatile()
  });
  
  App.TaskAdapterConfig = Ember.Object.extend({
      pageIndex: 0,
      numRecords: 10
  });
  
  App.TasksRoute = Ember.Route.extend({
      ...
  
      refreshModel: function(pageIndex) {
          this.adapterConfig.set('pageIndex', pageIndex);
          this.store.find('task');
      },
  
      ...
  });
  </code></pre>
  
  <p>I'm wondering if there is a better way in achieving this?</p>