KnockoutJS 버그입니까 아니면 여러 바인딩이 잘못 되었습니까?

Question

나는 KnockoutJS 문서를 통해 작업 중이며 page에서 "Writeable calculated observables"섹션의 예제 3을 수정하려고했습니다.

이 예제는 기본적으로 텍스트 상자를 보여주고 사용자가 텍스트 상자에 숫자가 아닌 값을 입력하면 메시지를 표시합니다. 메시지가 나타날 때 텍스트 상자에 분홍색 배경이 있도록 코드를 수정하려고했습니다.

잘못된 값을 입력하면 텍스트 상자가 예상대로 분홍색이되지만 입력 한 값이 원래 값으로 대체됩니다. 분홍색 배경을 얻기 위해 스타일 바인딩을 추가하기 전에 모든 것이 잘 작동했기 때문에이 문제가 왜 발생하는지 알 수 없습니다. 스타일 바인딩을 제거하고 잘못된 값을 입력 할 때 동작이 어떻게 변경되는지 확인하십시오.

무슨 일 이니?

코드는 아래 또는 시도하십시오 jsfiddle.

<p> 
    Enter a numeric value: 
    <input data-bind="value: attemptedValue 
        ,style: {backgroundColor: lastInputWasValid() ? 
              'transparent' : 
              'pink' }"/> 
</p> 
<div data-bind="visible: !lastInputWasValid()">That's not a number!</div> 

function MyViewModel() { 
    this.acceptedNumericValue = ko.observable(123); 
    this.lastInputWasValid = ko.observable(true); 

    this.attemptedValue = ko.computed({ 
     read: this.acceptedNumericValue, 
     write: function (value) { 
      if (isNaN(value)) 
       this.lastInputWasValid(false); 
      else { 
       this.lastInputWasValid(true); 
       this.acceptedNumericValue(value); // Write to underlying storage 
      } 
     }, 
     owner: this 
    }); 
} 

ko.applyBindings(new MyViewModel()); 

편집 : 스타일 바인딩이 제거 된 또 다른 fiddle입니다. 문자 'a'를 추가하고 텍스트 상자에서 초점을 잡으십시오. 문자 'a'가 어떻게 거기에 머무르는 지 주목하십시오. 원래 fiddle 텍스트 상자로 시도해보고 제거 방법을 확인하십시오. 두 피들 간의 유일한 변화는 스타일 바인딩의 존재입니다.

Answer 1

그래서 an email to the KnockoutJS user group을 보냈고 약 7 시간 만에 답장을 받았습니다 (너무 초라한 것은 아닙니다).

슬프게도 Google 그룹스가 나를 혼란스럽게합니다. 내 질문을 정리 한 친구에게 답장을 보내서 여기에 와서 답변을 올리라고 말하면서 내가 그 사람을 위해 할 것이라고 추측합니다. 모든 크레딧은 KO 사용자 그룹의 John Earles에게 전달됩니다.

나에게 의미가 있습니다.

스타일이없는 예제에서 Knockout은 입력을 다시 렌더링 할 필요가 없으므로 값은 동일하게 유지됩니다. 스타일에 대한 예제에서 Knockout은 입력을 다시 렌더링해야하므로 (스타일을 추가하기 위해) BOTH 바인딩이 실행되고 마지막으로 수용된 값인 값을 읽습니다. 여기

두 관찰 가능한 중 하나에 시도 된 값을 저장 버전이며, lastInputWasValid에 따라 적절한 하나를 읽

http://jsfiddle.net/jearles/VSWfr/

Answer 2

값이 모델에 쓰여지지 않은 것보다 NAN 인 경우, onblur 이벤트가 발생하면 입력 값이 모델의 기존 값으로 업데이트됩니다.

this.acceptedNumericValue(value); // Write to underlying storage

는 값이 숫자 인 업데이트 코드입니다. else 블록에 없음을 알 수 있습니다.