這是一個KnockoutJS錯誤還是我做多個綁定錯誤？

我一直在通過KnockoutJS文檔工作，並嘗試修改此page中的「可寫計算觀察值」部分的示例3。這是一個KnockoutJS錯誤還是我做多個綁定錯誤？

該示例基本顯示一個文本框，並在用戶輸入一個非數字值到文本框時顯示一條消息。我試圖修改代碼，以便在出現消息時文本框具有粉紅色背景。

問題是當你輸入一個無效的值時，文本框變成粉紅色，但是你輸入的值被替換爲原來的值。我不知道爲什麼會發生這種行爲，因爲在我添加樣式綁定以獲取粉紅色背景之前，一切正常。嘗試移除樣式綁定，並注意輸入無效值時行爲如何變化。

這是怎麼回事？

該代碼在下方或試用此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文本框，並注意它是如何刪除的。這兩個小提琴之間唯一的變化就是風格綁定的存在。

來源

2012-02-24 xTRUMANx

所以我寄了an email to the KnockoutJS user group並在7個小時內得到了答覆（不算太破舊）。

不幸的是，Google網上論壇讓我感到困惑，我不知道如何回覆那些澄清我的問題的人，告訴他來這裏發表他的回答，所以我想我會爲他做。所有功勞歸功於KO用戶組的John Earles。

它對我有意義。

在沒有樣式的例子中，Knockout不需要重新渲染您的輸入（只有錯誤），所以值保持不變。在你的樣式中，Knockout不得不重新渲染你的輸入（添加樣式），所以BOTH綁定執行，並且它讀取值 - 這是最後接受的值。

這裏是保存所嘗試的價值分爲兩個觀測的一個版本，並基於 lastInputWasValid適當一個寫着：

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

來源

2012-02-26 14:10:04 xTRUMANx

如果值是NAN，那麼它永遠不會寫入模型，因此當onblur事件被觸發時，輸入將更新爲模型的現有值。

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

那是更新時的值是數字代碼。您可以看到它不在else區塊中。

來源

2012-02-24 13:20:19 Jonathan

你有沒有嘗試刪除喜歡我的風格結合提到？只要這樣做，行爲就會發生變化，以便無效值保留在文本框中而不是被刪除。這裏有一個新的[小提琴]（http://jsfiddle.net/6JzJ8/），並刪除了樣式綁定。嘗試追加字母'a'並注意它如何停留在那裏。試着用原版小提琴做這件事，當你附加字母'a'並離開文本框時注意區別。 – xTRUMANx 2012-02-26 06:01:13

這是一個KnockoutJS錯誤還是我做多個綁定錯誤？

回答

相關問題