2012-04-03 2 views
2

저는 knockout.js를 사용하여 사용자가 다양한 주제별로 데이터를 필터링 할 수있게하는 GUI를 만들었습니다. 이러한 주제의 대부분은 html로 된 선택 항목 인 콤보 박스 항목으로 표시됩니다.초기화하는 동안 업데이트를 비활성화하는 방법은 무엇입니까?

필자는 모든 필터 선택에서 변경 사항을 구독하기 위해 녹아웃을 사용했습니다. 구독 이벤트는 필터 설정을 수집하고이를 ajax를 통해 서버로 보내고 필터를 만족하는 항목의 목록을 가져 오는 함수를 호출하기 만합니다.

또한 서버의 데이터에는 각 선택에 사용할 수있는 필터 항목이 포함되어 있습니다.

GUI가 완전히 사용 가능하기까지 시간이 걸렸기 때문에 항상 시작 속도에 대해 궁금해했습니다. 잠시 전에 데이터 전달 함수에 중단 점을 설정하고 시작시 약 20 회 호출되는 것을 보았습니다. :-(

나는이 문제를 방지하려면 어떻게


var viewModel = { 
    entries: ko.observableArray(),   // this is receiving the filtered items 

    selectedMode: ko.observable(null),   // Filter 1 initialized to null 
    selectedSubMode: ko.observable(null),  // Filter 2 initialized to null 
    . 
    . 
    availableModes: ko.observableArray(),  // Available filter items 1. 
    availableSubModes: ko.observableArray(), // Available filter items 2. 
}; 
 

가 HTML 요소는 다음과 같이 바인딩 : 페이지 로딩 시간에서

 

<select 
    id="selectMode" 
    tabindex="1" 
    data-bind="options: availableModes, 
       value: selectedMode, 
       optionsCaption: 'Any'" 
> 
</select> 
 

내가 selectedItems를 단일로드와 발행 모든 항목이 "null"로 선택되므로 사용 가능한 모든 데이터의 첫 번째 페이지가 반환되고 availableModes 및 availableSubModes를 데이터에 반환 된 사용 가능한 항목으로 설정합니다 ..

그러면 ty 반복 시작시 :

첫 번째 선택 상자의 표시가 optionsCaption으로 바인딩에서 설정 한 "Any"값으로 변경됩니다. 그리고 이것은 변화 사건을 일으키는 것 같습니다. 이렇게하면 서버에 대한 요청이 다시 시작되고 다음 선택 항목은 "모두"로 설정됩니다. 이것은 모든 선택 요소에 대해 반복됩니다.

아무도 어떻게 이런 일이 발생하지 않도록 할 수 있습니까?

첫 번째 아이디어는 데이터로드 중에 녹아웃에서 업데이트를 사용 중지하고 업데이트가 완료된 후 강제로 업데이트하는 것입니다. 그러나 나는 그것에 적합한 방법을 찾을 수 없었다. 어떤 힌트를

감사합니다 ...

+0

드롭 다운 변경 사항을 어떻게 구독 하시겠습니까? –

+0

각 선택 항목에 대해 다음을 사용합니다. viewModel.selectedMode.subscribe (function() { viewModel.loadData(); }); loadData는 서버에 요청을 보내고 반환 된 데이터를 사용하는 함수입니다. – nttakr

+0

관측 대상에 가입하는 대신 드롭 다운의 변경 이벤트를 구독하면 어떻게 될까요? –

답변

2

가 잘못 정확히 무슨 말을하기 어렵다 구독 방법 등으로 전체 코드를 보지 않고. 그러나 당신이 언급 한 곳에서 select가 "Any"로 설정되면 change 이벤트가 트리거된다는 것을 알았습니다. 나는 당신이 묘사 한 것에 기초하여 이것을 설명 할 수 있다고 생각합니다.

KO 옵션 바인딩 문서.

KO는 텍스트를 표시하는 항목 앞에 접두사를 붙입니다. "항목 선택 ..."값이 정의되지 않았습니다. 따라서 myChosenValue 에 값이 정의되지 않은 경우 (관찰 가능 항목은 기본적으로), 더미 옵션이 선택됩니다.

즉, selectedMode 값을 null로 설정하면 "Any"값과 일치하지 않습니다. 바인딩은 기존 값을 일치 시키려고 시도합니다. 따라서 selectMode를 undefined로 설정하면 변경할 수 없습니다.

이 jsfiddle을 가져 가십시오. 서버 페치 로그 문을 볼 수 있습니다.selectedMode null 할당을 제거하면 log 문이 실행되지 않습니다. 이 완전히 바이올린과 가입 전체 설정 및 일부 가짜 아약스 문을 포함하는 것, 포크가 해결되지 않으면

http://jsfiddle.net/madcapnmckay/H7jzd/

, 우리는 작업을 진행 할 수 있어야한다.

희망 하시겠습니까?

관련 문제