Ember.Router 无法响应状态为 root.paginated 的事件 paginateUsers

Question

我有一个相当大的例子，但问题是当我第一次过渡到分页路线时 - 一切都很好。但是，如果我尝试单击另一个（启动分页事件），我会收到以下错误

我没有 jsfiddle，因为它使用的是 ember-data，并且对象数据绑定到我的 REST 端点。

ember 版本是 pre 1.0，使用最新的 ember-data + handlebars-1.0.0.beta.6 和 jQuery 1.7.2

未捕获的错误：无法响应事件 paginateUsers 处于 root.paginated 状态。

这是我的模板和 ember 应用程序

<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

您的分页路线需要paginateUsers 操作。