confused with Ember arrangedContent, object with id > 100 not paginating correctly

Question

on a crusade to learn ember, I'm trying to create a blog with it, and now I'm on the pagination step.

Everything is working, except all of my posts with an id of over 100 don't show up in the beginning.

This is what my PostsIndexController looks like ->

Blog.PostsIndexController = Ember.ArrayController.extend({
  sortProperties: ['id'],
  sortAscending: false,

  page: 1,
  perPage: 8,
  totalPages: (function() {
    return Math.ceil(this.get('length') / this.get('perPage'));
  }).property('length', 'perPage'),

  pages: (function() {
    var collection = Ember.A();

    for(var i = 0; i < this.get('totalPages'); i++) {
      collection.pushObject(Ember.Object.create({
        number: i + 1
      }));
    }

    return collection;      
  }).property('totalPages'),

  hasPages: (function() {
    return this.get('totalPages') > 1;
  }).property('totalPages'),

  prevPage: (function() {
    var page = this.get('page');
    var totalPages = this.get('totalPages');

    if(page > 1 && totalPages > 1) {
      return page - 1;
    } else {
      return null;
    }
  }).property('page', 'totalPages'),

  nextPage: (function() {
    var page = this.get('page');
    var totalPages = this.get('totalPages');

    if(page < totalPages && totalPages > 1) {
      return page + 1;
    } else {
      return null;
    }
  }).property('page', 'totalPages'),

  paginatedContent: (function() {
    var start = (this.get('page') - 1) * this.get('perPage');
    var end = start + this.get('perPage');

    return this.get('arrangedContent').slice(start, end);
  }).property('page', 'totalPages', 'arrangedContent.[]'),

  selectPage: function(number) {
    this.set('page', number);
  }
});

and this is what my template looks like ->

{{#each post in paginatedContent}}
  {{ render 'posts/post' post}}
{{/each}}

{{#if hasPages}}
  <div class="pagination">
    {{#if prevPage}}
      <a href="#" class="previous_page" rel="previous" {{action "selectPage" prevPage}}>&larr; Newer</a>
    {{else}}
      <span class="previous_page disabled">&larr; Newer</span>
    {{/if}}

    {{#if nextPage}}
      <a href="#" class="next_page" rel="next" {{action "selectPage" nextPage}}>Older &rarr;</a>
    {{else}}
      <span class="next_page disabled">Older &rarr;</span>
    {{/if}}
  </div>
{{/if}}

I think the problem is in the way arrangedContent is setting up the array --

  paginatedContent: (function() {
    var start = (this.get('page') - 1) * this.get('perPage');
    var end = start + this.get('perPage');

    return this.get('arrangedContent').slice(start, end);
  }).property('page', 'totalPages', 'arrangedContent.[]'),

But, am a bit confused with what arrangedContent is, and how to fix this issue. Help much appreciated!

Answer 1

I Haven't quite figured out why this happened, but instead of sorting by id, I just sorted by created_at, which fixed the issue.

sortProperties: ['created_at'],

Answer 2

You can create an other "real" numeric type ID for the model, and order by this field. Works fine!

App.Msgboard = DS.Model.extend({
    numericId: function(){
        var id = this.get('id');
        if (id) { return +id; }
    }.property('id'),
    name:    DS.attr('string')
});