自定义Ember组件 实现pagination

目标：实现一个可复用的分页组件，用来将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,大功告成！