Question

I have a fairly large example but the issue is that when I transition to the pagination route the first time -all is good. But if I try to click on another (kicking off the pagination event) I get the error below

I don’t have a jsfiddle because this is using ember-data and the objects are databound to my REST endpoint.

The ember version is pre 1.0 using the latest ember-data + handlebars-1.0.0.beta.6 and jQuery 1.7.2

Uncaught Error: could not respond to event
paginateUsers in state root.paginated.

Here is my template and ember app

<script type="text/x-handlebars" data-template-name="person">

<table>
<thead></thead>
<tbody>
   {{#each person in controller.paginatedContent}}
    <tr>
      <td>{{person.id}}</td>
      <td>{{view Ember.TextField valueBinding="person.username"}}</td>
      <td><input type="submit" value="update" {{action updatePerson person}}/></td>
      <td><input type="submit" value="delete" {{action removePerson person}}/></td>
    </tr>
   {{/each}}
</tbody>
</table>
<ul class="pagination gui-text">
  <li name="prev"><span class="paginator" {{action prevPage href=true target="controller"}}>Prev>
  {{#each pages}}
    {{view PersonApp.PaginationItemView contentBinding="this"}}
  {{/each}}
  <li name="next"><span class="paginator" {{action nextPage href=true target="controller"}}>Next>
</ul></li>

</script>

<script type="text/x-handlebars" data-template-name="pagination_item">

{{#with view}}
<a {{action paginateUsers content href=true}}>
  <span {{bindAttr class="spanClasses isActive:active"}}>{{content.page_id}}</span>
</a>
{{/with}}

</script>


PersonApp = Ember.Application.create({});

PersonApp.ApplicationController = Ember.ObjectController.extend({});

PersonApp.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

PersonApp.PersonView = Ember.View.extend({
  templateName: 'person',
  addPerson: function(event) {
    var username = event.context.username;
    if (username) {
      this.get('controller.target').send('addPerson', username);
      event.context.set('username', '');
    }
  }
});

PersonApp.Person = DS.Model.extend({
  id: DS.attr('number'),
  username: DS.attr('string')
});

PersonApp.Store = DS.Store.extend({
  revision: 4,
  adapter: DS.DjangoRESTAdapter.create({
    bulkCommit: false,
    plurals: {
      person: 'people'
    }
  })
});

PersonApp.PaginationItemView = Ember.View.extend({
  templateName: 'pagination_item',

  tagName: 'li',
  spanClasses: 'paginator pageNumber',

  isActive: function() {
    var currentPage = this.get('parentView.controller.currentPage');
    var page_id = this.get('content.page_id');

    if(currentPage) {
      return currentPage.toString() === page_id.toString();
    } else {
      return false;
    }
  }.property('parentView.controller.currentPage')
});

PersonApp.PersonController = Ember.ArrayController.extend({
  content: [],
  sortProperties: ['id'],
  pages: function() {
    var availablePages = this.get('availablePages'),
    pages = [],
    page;

    for (i = 0; i < availablePages; i++) {
      page = i + 1;
      pages.push({ page_id: page.toString() });
    }

    return pages;
  }.property('availablePages'),

  currentPage: function() {
    return this.get('selectedPage') || 1;
  }.property('selectedPage'),

  nextPage: function() {
    var availablePages = this.get('availablePages');
    var currentPage = parseInt(this.get('currentPage'), 10);
    var pages = this.get('pages');
    var nextPage;

    nextPage = currentPage + 1;

    if(nextPage > availablePages) {
      nextPage = nextPage - availablePages;
    }

    PersonApp.get('router').send('paginateUsers', pages[nextPage - 1]);
  },

  prevPage: function() {
    var availablePages = this.get('availablePages');
    var currentPage = parseInt(this.get('currentPage'), 10);
    var pages = this.get('pages');
    var nextPage;

    nextPage = currentPage - 1;

    if(nextPage <= 0) {
      nextPage = nextPage + availablePages;
    }

    PersonApp.get('router').send('paginateUsers', pages[nextPage - 1]);
  },

  availablePages: function() {
    var length = this.get('filteredContent.length');
    var itemsPerPage = 2;

    return (length / itemsPerPage) || 1;
  }.property('filteredContent.length'),

  paginatedContent: function() {
    var filteredContent = this.get('filteredContent');
    var selectedPage = this.get('selectedPage') || 1;

    var itemsPerPage = 2;
    var upperBound = (selectedPage * itemsPerPage);
    var lowerBound = (selectedPage * itemsPerPage) - itemsPerPage;

    return this.get('filteredContent').slice(lowerBound, upperBound);
  }.property('selectedPage', 'filteredContent.@each'),

  filteredContent: function() {
    return this.get('content');
  }.property('content.@each')
});

PersonApp.Router = Ember.Router.create({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      paginateUsers: Ember.Route.transitionTo('paginated'),
      addPerson: function(router, username) {
        PersonApp.Person.createRecord({ username: username });
        router.get('store').commit();
      },
      updatePerson: function(router, event) {
        router.get('store').commit();
      },
      removePerson: function(router, event) {
        event.context.deleteRecord();
        router.get('store').commit();
      },
      connectOutlets: function(router) {
        router.get('applicationController').connectOutlet('person', router.get('store').findAll(PersonApp.Person));
      }
    }),

    paginated: Ember.Route.extend({
      route: '/page/:page_id',

      connectOutlets: function(router, context) {
        router.get('personController').set('selectedPage', context.page_id);
      },

      exit: function(router) {
        router.get('personController').set('selectedPage', undefined);
      }
    })
  })
});

$(function () {
  PersonApp.initialize(PersonApp.Router);
});

Answer 1

Your paginated route needs a paginateUsers action.