分页时未更新过滤列表

Question

• Ember : 1.1.2
• Ember Data : 1.0.0-beta.4+canary.c15b8f80
• Handlebars : 1.0.0
• jQuery : 1.10.2

I have a list of objects that I can filter on a certain attribute value, eg all posts vs. published posts only. I also created 2 routes, so both lists can be accessed using an url:

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

Both lists use the same template:

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}}

The showMore action in a base controller sends a request to a (Rails) backend which responds with the next page.

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

This showMore works as expected when the un-filtered list is shown. To keep the example simple, I hard-coded the page value.

However, when the filtered list is displayed, the showMore does send a AJAX request, but the page does not get updated with the extended list of objects. When I toggle between All and Published the list of published is updated.

Answer 1

When the showMore action is called, the AJAX request is sent, but the list isn't updated. This is due to the fact that the route's model hook is called only on entering the route.

You need to make sure the list is updated when the posts change by filtering the collection in the 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.[]')

However what I would do is map the pages in the router scheme:

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 });

Then the following routes definitions would work as expected, without the need to filter in 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