Является ли это ошибкой KnockoutJS или я делаю несколько привязок неправильно?

Question

Я проработал через документацию KnockoutJS и попытался изменить пример 3 раздела «Записываемые вычисленные наблюдаемые» в этом page.

В примере в основном показано текстовое поле и отображается сообщение, если пользователь вводит нечисловое значение в текстовое поле. Я попытался изменить код, чтобы текстовое поле было розовым, когда появляется сообщение.

Проблема заключается в том, что при вводе недопустимого значения текстовое поле становится розовым, как ожидалось, но введенное вами значение заменяется на то, что изначально было там. Я понятия не имею, почему это происходит, поскольку все работает нормально, прежде чем я добавил привязку стиля, чтобы получить розовый фон. Попробуйте удалить привязку стиля и обратите внимание, как изменяется поведение при вводе недопустимого значения.

Что происходит?

Код ниже или опробовать 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()); 

EDIT: Вот еще один fiddle со стилем связывания удалены. Попробуйте добавить букву «a» и сосредоточиться на текстовом поле. Обратите внимание на то, как буква «а» остается там. Попробуйте это с исходным текстовым полем fiddle и обратите внимание, как он удален. Единственное изменение между двумя скриптами - наличие привязки стиля.

Answer 1

Поэтому я отправил an email to the KnockoutJS user group и получил ответ примерно через 7 часов (не слишком потрепанный).

К сожалению, Группы Google меня смущают, и я понятия не имею, как ответить на вопрос, кто объяснил мой вопрос, чтобы он сказал ему, чтобы он приехал сюда и опубликовал свой ответ, поэтому я предполагаю, что сделаю это для него. Весь кредит принадлежит John Earles группы пользователей KO.

Это имеет смысл для меня.

В вашем примере без стиля Knockout не нужно повторно отображать ваш вход (только ошибка), поэтому значение остается неизменным. В вашем примере со стилем Knockout необходимо повторно отобразить ваш вход (чтобы добавить стиль), поэтому BOTH bindings выполняется, и он считывает значение - это последнее принятое значение.

Вот версия, которая сохраняет предпринятое значение в одном из двух наблюдаемых и считывает из соответствующего основанную на lastInputWasValid:

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

Answer 2

Если значение NAN не указано, оно никогда не записывается в модель, поэтому вход будет обновлен до существующего значения модели при запуске события onblur.

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

Является ли код, который обновляет, когда значение числовой. Вы можете видеть, что это не в блоке else.