페이지 번호가있는 CodeCamper 개선

Question

저는 SPA 구축을 위해 Pluralsight에서 John Papa의 멋진 비디오를 보았습니다.

이제는 세션 페이지에 대한 페이지 매김을 구현하려고하는데, 내가 한 일이 올바른 방법인지는 확실치 않습니다. 다른 사람이 비슷한 것을 시도해 본다면 의견을 보내 주시면 감사하겠습니다.

다음은 내가 수행 한 작업입니다.

sessions.html

---

<section> 
    <footer> 
     <ul class="pager"> 
      <li> 
       <button class="btn btn-info btn-small" data-bind="click: previous, enable:canPrev"><i class="icon-angle-left"></i>Previous</button> 
      </li> 
      <li> 
       <button class="btn btn-info btn-small" data-bind="click: next, enable: canPrev">Next<i class="icon-angle-right"></i></button> 

      </li> 
     </ul> 
    </footer> 
</section> 

sessions.js

---

var currentPage = ko.observable(), 

    activate = function() { 
     currentPage(0); 
     return datacontext.getSessionPartials(sessions); 
    }, 

    previous = function() { 
     currentPage(currentPage() - 1); 
     return datacontext.getSessionPartials(sessions, true, currentPage()); 
    }, 

    canPrev = ko.computed(function() { 
     return currentPage() > 0; 
    }), 

    canNext = ko.computed(function() { 
     //return currentPage > 0; 
    }), 

    next = function() { 
     currentPage(currentPage() +1); 
     return datacontext.getSessionPartials(sessions, true, currentPage()); 
    }, 

    var vm = { 
     //existing stuff plus the following: 
     previous: previous, 
     next: next, 
     currentPage: currentPage, 
     canPrev: canPrev, 
     canNext: canNext, 
    }; 

datacontext.js

---

var query = EntityQuery.from('Sessions') 
      .select('id, title, code, speakerId, trackId, timeSlotId, roomId, level, tags') 
      .skip(currentPage * 5).take(5)     
      .orderBy('timeSlotId, level, speaker.firstName') 
      .inlineCount(true); 

inlineCount의 결과를 세션 viewModel에 추가하는 방법을 모르기 때문에 canNext를 제외하고는 작동합니다. 가장 좋은 방법은 무엇일까요?

Answer 1

Breeze가 엔티티 관리자에서 캐시하기 때문에 Breeze를 사용하면 원하는만큼의 행을 얻을 수 있습니다. 그런 다음 원하는 페이지 만 페이지에 표시하십시오. 따라서 페이지 크기가 20 인 경우 40을 가져온 다음 20을 표시합니다. 다음 20 개의 페이지가 이미 있고 다른 페이지가 있는지 확인합니다. 이런 식으로 가상 페이징을 시뮬레이션 할 수 있습니다. 좋아, 그 우아한 아니지만, 그것을 작동합니다 :)

또 다른 옵션은 레코드 개수로 호출을 프라임하는 것입니다. Breeze를 사용하여 총 레코드 수를 얻는 방법이있을 수 있다는 것을 Breeze의 사람들이 막연하게 기억합니다. 나는 그들이 구체적으로 기억할 수없는 것처럼 그들에게 차임을 할 것을 요청할 것이다.

동일한 호출을 사용하여 개수를 가져올 데이터를 가져 오는 경우 datacontext의 엔터티에 값을 설정할 수 있습니다. 또는 세션과 카운트가 포함 된 래퍼 객체를 메서드에서 반환 할 수 있습니다. 얻기 위해 이런 식으로 뭔가 ...

// inside the datacontext method's querySucceeded 
// data is your session data you got back 
// rowCount is the number of total rows. 

return { sessions: data, rowCount: rowCount }; 

Answer 2

는 inlineCount session.js에서

var getSessionPartials = function (sessionsObservable, totalpages,totalrecords, currentPage) { 

     var query = EnityQuery.from('Sessions') 
       .select('id, title, code, speakerId, trackId, timeSlotId, roomId, level, tags') 
       .skip(currentPage * 5).take(5) 
       .where("title","startsWith","A") 
       .orderBy('timeSlotId, level, speaker.firstName') 
       .inlineCount(true); 


     return manager.executeQuery(query) 
       .then(querySucceeded) 
       .fail(queryFailed); 

     function querySucceeded(data) { 
      var list = partialMapper.mapDtosToEntities(
       manager, data.results, entityNames.session, 'id' 
       ); 

      if (sessionsObservable) { 
       sessionsObservable(list); 
       totalpages(Math.ceil(data.inlineCount/10)); 
       totalrecords(data.inlineCount); 
      } 

      log('Retireved Sessions from remote datasource', data, true); 
     } 
    }; 

이

var currentPage = ko.observable(); 
var totalPages = ko.observable(); 
var totalrecords = ko.observable(); 


canNext = ko.computed(function() { 
    return currentPage() < totalPages(); 
    //return true; 
});