自定义Ember组件实现pagination

最新推荐文章于 2021-05-31 01:13:21 发布

原创最新推荐文章于 2021-05-31 01:13:21 发布 · 684 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何利用Ember的Store特性创建一个可复用的分页组件，该组件能高效地将控制器中的多个元素分批显示并进行前端分页操作，尤其适用于移动应用的流畅体验。通过组件实体和模板实现，包括页面跳转、最大显示数量调整等功能，确保在不同场景下提供稳定和高效的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标：实现一个可复用的分页组件，用来将controller中的多个元素分批显示，一次性将所有元素取出，然后在前端分页。

Ember的store缓存了所有加载过的model，并且预加载关系树上的其他叶子，所以在网络信号不太好的区域依然能够顺畅的操作应用。这相当棒，尤其是对移动应用而言。

清单一：组件实体

App.PageBoxComponent = Ember.Component.extend

  pageNum: 0
  maxPerPage: 8
  total:1
  pageItem:'model'
  data:[]
  
  pageNumChanged: (->
    @get('targetObject').set('pageNum',@get('pageNum'))
  ).observes('pageNum')
  
  targetModelChanged: (->
    if @get('pageNum') isnt 1
      @set('pageNum',1)
    else
  ).observes('targetObject.model.id')
  
    
  pages: (->
    Math.ceil(this.get('total')/this.get('maxPerPage')||1)
  ).property('total', 'maxPerPage')
  
  isNext: (->
    @get('total')>@get('pageNum')*@get('maxPerPage')
  ).property('total', 'pageNum', 'maxPerPage')
  
  isPrevious: (->
    @get('pageNum') > 1
  ).property('pageNum')
  
  paginatedContent: (->
     selectedPage = @get('pageNum') || 1;
     upperBound = (selectedPage * @get('maxPerPage'));
     lowerBound = (selectedPage * @get('maxPerPage')) - @get('maxPerPage');
     models = @get('data');
     @set "total", models.content.length
     displayItems=models.slice(lowerBound, upperBound);
     @set('targetObject.displayItems', displayItems)
     return
  ).observes('pageNum','data.@each')
  
  showFirstPage:->
    @set "pageNum", 1
    @paginatedContent()
    
  actions:
    next:->
      @set('pageNum',@get('pageNum')+1)
      return
    previous:->
      @set('pageNum',@get('pageNum')-1)
      return
    go:(num)->
      @set('pageNum',num)
      return
    setMaxPerPage: (num)->
      @set("maxPerPage", num)
      return
      
  didInsertElement:->
    @showFirstPage()
    return

清单二： template

<div {{bind-attr class=":page-box boxStyle"}}>
    <div {{bind-attr class="isPrevious:page-box-previous:hidden :icon-arrow-left"}} {{action "previous"}}></div>
    <div {{bind-attr class="isNext:page-box-next:hidden :icon-arrow-right"}} {{action "next"}}></div>
    <div class="page-box-content">{{yield}}</div>
    <div class="page-box-total">{{pageNum}}/{{pages}}</div>
</div>

清单三：如何使用

{{#page-box next="next" previous="previous" data=shops pageNum=pageNum}}
    {{#each shop in displayItems}}
       {{render 'shop-min' shop}}
    {{else}}
	<li class="no-shops-yet">Welcome</li>
    {{/each}}
{{/page-box}}

OK,大功告成！