在文本輸入中顯示計算的可觀察值

Question

爲什麼我的示例代碼中的文本input只顯示輸入到其中的數值，而不是帶有「$」的格式值？

function MyViewModel() { 
 
    var self = this; 
 
    this.price = ko.observable(25.99); 
 

 
    this.formattedPrice = ko.computed({ 
 
     read: function() { 
 
      return "$" + self.price().toFixed(2); 
 
     }, 
 
     write: function (value) { 
 
      // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable 
 
      value = parseFloat(value.replace(/[^\.\d]/g, "")); 
 
      self.price(isNaN(value) ? 0 : value); // Write to underlying storage 
 
     }, 
 
     owner: self 
 
    }); 
 
} 
 

 
ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<p>Price: <input data-bind="value: formattedPrice" /></p>

Answer 1

你的代碼是好的。

當值改變時，Knockout調用write方法 - 通常在焦點離開文本框時發生。嘗試改變數值然後按下tab - 你應該看到顯示的數值發生變化。

如果你想更新每個按鍵的顯示你可以嘗試[textInput綁定] [1]，但是這不被推薦，因爲它往往與打字過程相沖突。嘗試

[1]：http://knockoutjs.com/documentation/textinput-binding.html「textInput binding」，但是對於這樣的字段，您可能會發現它不適合，因爲它在鍵入時會發生變化。