knockout.js의 바인딩 일시 중단 1.2.1

Question

녹아웃에서 바인딩을 일시 중지했다가 다시 시작할 수있는 옵션이 있습니까?

버전 : 다음에서 유래 바인딩을 일시 중단에 대한 1.2.1

우리의 필요를 knockout.js. 일부 작업을 수행하는 동안 서버에서 많은 데이터를로드해야합니다. 예를 들어 다중 선택의 전체 데이터가 변경된 경우 동적으로 행이 추가되는 테이블이 있습니다.

이제이 현재 시나리오에서는 양식이 완전히 바인딩되어 있습니다. 뷰 모델. 콤보를 지우고 각 항목을 추가하면보기가 새로 고쳐 지므로 중요한 지연이 있습니다. 바인딩을 일시 중단 할 수단이 있다면 일시 중단 한 다음 모든 데이터를 뷰 모델에로드 한 다음 다시 바인딩을 다시 시작할 수 있습니다.

Answer 1

knockout.js에서 바인딩을 일시 중단하는 방법이 없다고 생각합니다. 코드를 보지 않고도 말하기는 어렵지만 느린 정도는 observableArrays를 지우고 새 항목을 하나씩 추가하여 새로 고침한다는 사실에 기인합니다. 대신 한 번에 전체 배열을 새로 고칠 수 있습니다 :

는

... 
self.manyItems = ko.observableArray(); 
... 
function refreshItems(newItems){ 
    self.manyItems(newItems); 
} 

Answer 2

일시 중지 및 재개가 가능하다 : 라이언 Niemeyer에 의해 함께 넣어 this demo를보십시오. 자세한 배경 정보는 블로그의 this entry을 참조하십시오.

Answer 3

구독을 일시 중지해야하는 경우 일시 중지 가능 컴퓨터 (아이디어는 this site에서 가져옴)로 계산 된 관찰 가능 항목에서 일시 중지 할 수있는 방법을 발견했습니다. 나는 그것을 일시 중지 할 수있는 기능을 추가하고 쓰기위한 능력을 추가하기 위해 약간 수정했다. 일시 중지에 대한

viewModel.myComputedObservable = ko.pauseableComputed(function() { 
    return myResult; 
}, viewModel); 

, 당신은 myComputedObservable.pause(); 전화, 모든 수정을 한 후 계산 된 관찰에 구독을 실행하는 데 그 수정에 대한 myComputedObservable.resume();를 호출합니다.

//wrapper for a computed observable that can pause its subscriptions 
     ko.pauseableComputed = function (evaluatorFunction, evaluatorFunctionTarget) { 
      var _cachedValue = ""; 
      var _isPaused = ko.observable(false); 

      //the computed observable that we will return 
      var result; 
      if (evaluatorFunction.read) { 
       result = ko.computed({ 
        read: function() { 
         if (!_isPaused()) { 
          //call the actual function that was passed in 
          return evaluatorFunction.read.call(evaluatorFunctionTarget); 
         } 
         return _cachedValue; 
        }, 
        write: function(value) { 
         if (!_isPaused()) { 
          //call the actual function that was passed in 
          return evaluatorFunction.write.call(evaluatorFunctionTarget, value); 
         } 
         return _cachedValue; 
        } 
       }, evaluatorFunctionTarget); 
      } else { 
       result = ko.computed(function() { 
        if (!_isPaused()) { 
         //call the actual function that was passed in 
         return evaluatorFunction.call(evaluatorFunctionTarget); 
        } 
        return _cachedValue; 
       }, evaluatorFunctionTarget); 
      }