1. 홈
  2. 질의 응답
  3. Knockout.JS로 페이지 네이션 컨트롤을 빌드

Knockout.JS로 페이지 네이션 컨트롤을 빌드

2013-04-19 3 views
2

Knockout.JS를 사용하여 게시물 목록을 렌더링하는 프로젝트를 상속 받았습니다. 고객은이 목록에 페이지가 매겨 지도록 요청했으며 이것이 Knockout.JS를 사용하여 가능하고 적절한 지 궁금합니다. 나는 순수한 JavaScript에서 이것을 쉽게 얻을 수 있었지만 일관성을 위해 Knockout (적절한 경우)을 사용하고 싶습니다.Knockout.JS로 페이지 네이션 컨트롤을 빌드

내가 알 수있는 바로는 페이지의 HTML에 기본 템플릿 을 사용합니다. ko.ObservableArray()에 포스트를 저장하는 ViweModel과 포스트 모델이 있습니다.

데이터는 jQuery ajax 호출을 통해로드됩니다. 여기서 반환 된 JSON은 모델 개체에 매핑되고 데이터 바인딩을 처리하는 ObservableArray로 전달됩니다.

ViewModel을 수정하여 페이지 매김 링크 (필요시 "이전"및 "다음"링크 포함)를 바인딩 할 수 있습니까 아니면 일반 JS로 작성하는 것이 더 좋을까요?

출처

2013-04-19 Greg B

답변

2

완전 패이지리스트의 "창"을 보여주는 녹아웃에서 계산 된 관찰 가능을 구축하기는 쉽습니다. 예를 들어 뷰 모델에 추가 :

는 
this.pageIndex = ko.observable(1); 
this.pagedList = ko.computed(function() { 
    var startIndex = (this.pageIndex()-1) * PAGE_SIZE; 
    var endIndex = startIndex + PAGE_SIZE; 
    return this.fullList().slice(startIndex, endIndex); 
}, this);

그런 pagedList 대신의 전체 목록에 기록을 보여주는 바인딩 "foreach는"을 결합하고, 앞으로 및 뒤로 링크에서, 단순히 pageIndex의 값을 변경. 거기서부터 시작하면 더 강력하게 만들거나 더 많은 기능을 제공 할 수 있어야합니다.

또한 여기서는 모든 데이터를 클라이언트에 미리로드한다고 가정합니다. 이전 및 다음 링크에서 JSON 호출을 수행하고 반환 된 항목으로 모델을 업데이트하는 것도 가능합니다.

ViewModel.prototype.next = function() { 
    var self = this; 
    this.pageIndex(this.pageIndex()+1); 
    $.ajax("dataurl/page/" + this.pageIndex(), { 
     success: function(data) { 
      self.dataList(data); 
     } 
    }); 
}

(간결에 대한 아약스 호출의 jQuery 구문을 사용하지만, 어떤 방법이 괜찮습니다)

출처

2013-04-19 08:24:06 Grim

0

같은 페이징으로 콤보를 구현, 나는 그것을 수행하는 방법 매우 상세하게 설명했다. 당신은 그것을 찾을 수 있습니다 (여기에 http://contractnamespace.blogspot.com/2014/02/pagination-with-knockout-jquery.html). 쉽게 구현할 수 있으며 간단한 JQuery 플러그인을 사용하여 구현할 수 있습니다.

기본적으로 AJAX와의 정규 녹아웃 데이터 바인딩을 사용했으며 서버에서 데이터를 검색 한 후에 플러그인을 호출합니다. 여기에서 플러그인을 찾을 수 있습니다. 그 이름은 Simple Pagination입니다.

출처

2014-02-20 08:27:35

관련 문제

 관련 문제