2013-04-07 2 views
0

페이징 예제를 작성한 jsfiddle 비트를 움켜 잡았습니다.업데이트 녹아웃 변수/속성 계산이 작동하지 않습니까?

var persons = []; //holds array of names/tables 

var viewModel = { 
    fields: ko.observableArray(persons), 
    pageSize: ko.observable(1), 
    pageIndex: ko.observable(0), 
}; 

viewModel.pagedRows = ko.dependentObservable(function() { 
    var size = this.pageSize(); 
    var start = this.pageIndex() * size; 
    return this.fields.slice(start, start + size); 
}, viewModel); 

viewModel.maxPageIndex = ko.dependentObservable(function() { 
    return Math.ceil(this.fields().length/this.pageSize()) - 1; 
}, viewModel); 
그때 일반 텍스트 파일을 읽을 수 JQuery와 아약스 호출이 있고 그 (내 예 10) 값으로 viewModel.pageSize의 속성을 설정

것을 : 내 페이지 상단이 있습니다 잘 작동합니다. 객체 배열을 반환하는 데이터 호출은 viewModel.fields를 업데이트하고 처음 10 개의 행이 화면에 표시됩니다.

내가 가지고 "페이징"기능을 데이터를 통해 페이지 것을 매 10 초마다 호출하는 "window.setInternal을"다음에 그것은 거의 작동

function paging() { 
    viewModel.pageIndex(viewModel.pageIndex() + 1); 

    if (viewModel.pageIndex() > viewModel.maxPageIndex) { 
     viewModel.pageIndex(0);} 
} 

...을 pageIndex가 증가 유지하고 데이터를 페이지를 새로 고치고 녹아웃으로 바인딩 된 필드의 "pagedRows"하위 집합에 올바른 시작점을 표시합니다. 그러나 처음으로 "페이징"기능이 호출 되 자마자 "pagedRows"는 10 개의 객체를 포함하는 것으로부터 "필드"observablearray의 나머지 모든 객체로 갑자기 도약합니다. 왜 그런지 모르겠다 고요? 처음으로 10을 올바르게 설정하면 다음 10을 얻으려면 슬라이스를 수행 할 때 슬라이스가 수행되지만 10을 가져온 후에 나머지 모든 객체를 추가하는 것처럼 보입니다. viewmodel의 pagedRows 함수에서 "가져올 항목 수"가 잘못되었습니다.

의심 할 여지없이 나는 내 자신을 대신하여 간단한 오해가 될 것입니다. 그러나 나는 지금 당황 스럽습니다. 이 하루 종일보고 내 초보자의 기술은 그것을 밖으로 정렬 할 수 없습니다.

또한 "maxPageIndex"와의 비교를 통해 0으로 돌아가는 동작이 실패하고 계속해서 계속 증가합니다!

답변

0

viewModel.maxPageIndex는 dependentObservable입니다. 그것은이 큰 공상 개체라는 것을 의미합니다. 따라서 단지 참조 할 수 없습니다.

viewModel.maxPageIndex 

계산 된 값을 되 찾을 것을 기대하십시오. 계산 된 값을 다시 얻으려면

viewModel.maxPageIndex.peek() 

으로 문의하십시오.

더 이상 dependentObservables는 아니지만 calculated observables로 변경되었습니다.

자세한 내용은 http://knockoutjs.com/documentation/computedObservables.html의 설명서를 참조하십시오.

+0

감사합니다. 아래에 답변을 추가했습니다. – TheMook

+0

-1, 두 문 모두 올바르지 않습니다. 'peek()'은 일반적인 접근을 위해서 사용되어서는 안되며, 계산이 일어나기를 원하지 않는 특별한 경우에만 접근해야한다. 둘째, 이름 변경은 선택 사항이며,'dependantObservable'은 여전히 ​​동일한 함수에 매핑됩니다. – Tyrsius

0

그래서 몇 가지 문제가 있습니다.

먼저 "계산 된"대신 구식 "dependentObservable"을 사용했지만 그 방법으로는 여전히 문제가되지 않았습니다!

두 번째로 내 페이징 방법 "pageMaxIndex"의 끝 부분에 괄호를 놓친 :

if (viewModel.pageIndex() > viewModel.maxPageIndex()) { 

지금 작동하고 값을 반환하는 "슬쩍"이 필요하지 않습니다.

내 json 호출이 페이지 크기에 대한 문자열 값을 반환했기 때문에 슬라이스 문제가 발생했습니다. 이 오프셋을 추가하면 결과가 숫자 결과가 아닌 연결된 문자열이됩니다. 나는 "30"대신에 "1020"으로 끝내고있었습니다!

포인터를 주셔서 감사합니다. 코드 덤프

관련 문제