엠버를 이용한 다이내믹 페이지 네이션

Question

우리는 웹 어플리케이션을 만들기 위해 EmberJs를 사용합니다. 총 100 개의 항목 중에서 각각 5 개의 항목을 표시하는 페이지 매김 코드가 있습니다. 모두 100 개의 항목이 단일 API 호출에서 가져오고 배열로; '모델'로 전달됩니다. 컨트롤러는 페이지 번호 및 페이지 크기를 기반으로 배열을 분할합니다.

프레임 워크를 동적으로 만들고 싶습니다. 즉, 페이지 번호 및 페이지 크기 입력으로 서버에 API 호출을 보내야하고 각 다음 페이지 클릭에 대해 특정 응답을 받아야합니다.

내 코드는 여기에 있습니다.

라우터 :

App.AccountPointsRoute = Ember.Route.extend({ 
    totalTransactions: null, 
    model: function(params) { 
     var page = this.controllerFor('accountPoints').get('page'); 
     var pointsURL= App.config.getEndpoint()+'/account/points'; 
     var getUserDetailsForViewUserAccount = function(){ 
      if(params.email){ 
       return Ember.$.getJSON(App.config.getEndpoint()+'/admin/userInfoByEmail?email='+params.email).then(function(data){ 
        return data.payload.user.totalPoints; 
       }) 
      } 
     } 
     var transactionURL = App.config.getEndpoint()+'/account/transactions?page='+page+'&pageSize=2&raceId=0&selectedDate='+ App.current_month() +'%20'+App.current_year(); 
     if(params.email){ 
      pointsURL = App.config.getEndpoint()+'/admin/points?email='+params.email; 
      transactionURL = App.config.getEndpoint()+'/admin/transactions?page=1&pageSize=100&raceId=0&selectedDate='+ App.current_month() +'%20'+App.current_year()+'&email='+params.email; 
     } 
     var self = this; 
     return Em.RSVP.hash({ 
      points: Ember.$.getJSON(pointsURL).then(function(data){ 
       return data.payload; 
      }), 
      transactions: Ember.$.getJSON(transactionURL).then(function(data){ 
       self.set('totalTransactions', data.payload.totalRecords) 
       return data.payload.logs; 
      }), 
      userPoints:getUserDetailsForViewUserAccount(), 
     }); 
    }, 
    setupController: function(controller, models) { 
     controller.set('points', models.points); 
     controller.set('transactions', models.transactions); 
     controller.set('userPoints',models.userPoints); 
     controller.set('model', models.transactions); 
     controller.set('totalRecords', this.get('totalTransactions')); 
    } 
}); 

그리고 이것에 대한 컨트롤러는 I 페이지 번호 특정 응답을 얻을 수있는 '페이징'방법 내부 API 호출을 만들기 위해 코드에 무엇이 필요합니까

App.AccountPointsController = App.PaginationController.extend({ 
    needs:['application'], 
    queryParams:['email', 'page'], 
    page : 1, 
    pageSize: 5, 
    numPages: function() { 
     var pageSize = this.get('pageSize'), 
      //l = this.get('length'); 
      l = this.get('totalRecords'); 
     console.log("numPages "+ Math.ceil(l/pageSize)); 
     return Math.ceil(l/pageSize); 
    }.property('pageSize','length'), 

    paged: function() { 
     var page = this.get('page'); 
     var transactions = this.get('model'); 
     var page = this.get('page') - 1, 
     pageSize = this.get('pageSize'), 
     start = page * pageSize, 
     end = start + pageSize 
     length = transactions.get('length'); 
     transactions = transactions.slice(start,end); 
     this.set('length', length); 
     return transactions; 
    }.property('email', 'page', 'model', 'pageSize','pages'), 

}); 

서버에서. 답변을 기다리겠습니다.

Answer 1

컨트롤러에 있기 때문에 "페이징"방법으로 API 호출을하고 싶지 않습니다. 경로는 모델에 대한 데이터를 검색하기 위해 API 호출을 처리해야합니다.

템플릿의 링크가 원하는 페이지와 페이지 크기를 지정하는 쿼리 매개 변수를 포함하면됩니다. 그래서 같은 : 당신의 AJAX 호출을위한

<div class ="tableNavigation"> 
    {{#link-to 'accounts' (query-params page=previousPage pagesize=currentPageSize)}}Previous Page{{/link-to}} 
    {{#link-to 'accounts' (query-params page=nextPage pagesize=currentPageSize)}}Next Page{{/link-to}} 
    Current Page: {{page}} 
    Next: {{nextPage}} 
    Prev: {{previousPage}} 
</div> 

그런 다음 경로에서 쿼리 문자열에 params.nextPage 및 params.currentPageSize을 포함한다. 단지 변화 검색어 매개 변수는 일반적으로 다른 API 호출을 트리거하지 않습니다, 그래서 또한 경로에 포함 :

이

queryParams: { 
     pagesize: { 
      refreshModel: true 
     }, 
     page: { 
      refreshModel: true 
     } 
    }, 

그런 다음 컨트롤러에서이 같은 queryParams: ['page', 'pagesize']과 기능을 포함하지만 경계의 체크와 함께 :

nextPage: function() { 
     return (parseInt(this.get('page')) + 1); 
}.property('page'), 

previousPage: function() { 
     return (parseInt(this.get('page')) - 1); 
}.property('page'),