分页时未更新过滤列表

Question

• 灰烬：1.1.2
• Ember 数据：1.0.0-beta.4+canary.c15b8f80
• 车把：1.0.0
• jQuery : 1.10.2

我有一个对象列表，可以根据某个属性值进行过滤，例如所有帖子与仅发布的帖子。 我还创建了 2 条路线，因此可以使用 url 访问这两个列表：

App.Router.map ->
  @resource 'posts', ->    # '/posts'
    @route 'published'     # '/posts/published'

两个列表使用相同的模板：

App.PostsRoute = Em.Route.extend
  model: ->
    @get('store').find 'post'

App.PostsIndexRoute = Em.Route.extend
  model: ->
    @modelFor 'posts'

App.PostsPublishedRoute = Em.Route.extend
  model: ->
    @modelFor('posts').filter( (item) ->
      item.get('publishAt') <= new Date()
    )
  renderTemplate: (controller) ->
    @render 'posts/index',
      controller: controller

# posts.hbs
  ...
  {{#link-to 'posts.index'}}All{{/link-to}}
  {{#link-to 'posts.published'}}Published{{/link-to}}

  {{outlet}}

# posts/index.hbs
  {{#each}}
    <li>...</li>
  {{/each}}

  {{link-to showMore}}Show More{{/link-to}}

基本控制器中的showMore 操作向（Rails）后端发送请求，该后端响应下一页。

App.PostsController = Em.ArrayController.extend
  actions:
    showMore: ->
      @store.find 'post',
        page: 2

当显示未过滤的列表时，此showMore 按预期工作。为了使示例简单，我对页面值进行了硬编码。

但是，当显示过滤列表时，showMore 确实会发送 AJAX 请求，但页面不会使用扩展的对象列表进行更新。当我在All 和Published 之间切换时，已发布的列表更新。

Answer 1

当调用showMore 操作时，会发送 AJAX 请求，但不会更新列表。这是因为路由的model 钩子只有在进入路由时才会被调用。

您需要通过过滤App.PostPublishedController 中的集合来确保在帖子更改时更新列表：

App.PostPublishedController = Ember.ArrayController.extend
  needs: ['posts']
  posts: Ember.computed.alias('controllers.posts.content')

  content: ( ->
    @get('posts').filter( (item) ->
      item.get('publishAt') <= new Date()
    )
  ).property('posts.[]')

但是我要做的是在路由器方案中映射页面：

App.Router.map ->
  @resource 'firstPostsPage', { path: '/posts' }
  @resource 'posts', { path: '/posts/:page' }, ->
    @route 'published'

App.PostsRoute = Em.Route.extend
  model: (params) ->
    @get('store').find 'post',
      page: params.page

App.FirstPostsPageRoute = Em.Route.extend
  redirect: ->
   // Redirect '/posts' to '/posts/1'
   this.transitionTo('posts', { page: 1 });

那么以下路由定义将按预期工作，无需过滤PostPublishedController

App.PostsIndexRoute = Em.Route.extend
  model: ->
    @modelFor 'posts'

App.PostsPublishedRoute = Em.Route.extend
  model: ->
    @modelFor('posts').filter( (item) ->
      item.get('publishAt') <= new Date()
    )
  renderTemplate: (controller) ->
    @render 'posts/index',
      controller: controller