如何使knockoutJS實時響應屬性更改？

當我輸入一個新的名字，它會告訴我「歡迎：XXX」的跨度。
當我刪除文本框中的所有字符時，跨度中將不顯示任何內容。

問題是，當我刪除一個單詞（假設文本框的值是「Bill Gates」，默認情況下），我刪除了「Gates」，我希望span實時顯示「Bill」我離開了這個領域。

那麼如何讓KnockoutJS支持「Real Time」屬性更改？我希望看到跨度在我輸入時發生變化，而不是在離開文本框或按下「Enter」鍵時。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Knock Out Sample</title> 
</head> 
<body> 
     Your Name, please: <input type="text" data-bind="value: myName" /> 
     <br /> 
     <span data-bind="text: myNameShown, visible: showWelcome" id="spName"></span> 
</body> 

<script src="KnockOutJS.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    var model = { 
     myName: ko.observable("Bill Gates") 
    }; 

    model.myNameShown = ko.dependentObservable(function() { 
     return "Welcome: " + model.myName(); 
    }, model); 

    model.showWelcome = ko.dependentObservable(function() { 
     return model.myName() && model.myName().trim() != ""; 
    }, model); 

    ko.applyBindings(model); 
</script> 
</html>

來源

2015-05-20 xqMogvKW

參閱本http://knockoutjs.com/documentation/ value-binding.html。歡呼 –

The answer by @Luis利用valueUpdate: 'afterkeydown'康寶以極大的value綁定工作，但如果你使用淘汰賽3.2或更高版本有一個優選的備選答案：使用the textInput binding。這種綁定更簡潔，並處理跨瀏覽器的怪癖。使用這樣的：

ko.applyBindings({myName: ko.observable('initial value')});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
Input: <input type="text" data-bind="textInput: myName" /> 
 
<hr /> 
 
Result: <strong data-bind="text: myName"></strong>

引述有關textInput和value的區別上述文檔：

雖然值綁定也可以進行雙向文本框之間的結合和viewmodel屬性，你應該更喜歡textInput，只要你想立即實時更新。主要的區別是：

立即更新[...]

瀏覽器的事件處理怪癖[...]

來源

2015-05-20 08:28:42 Jeroen

是的，這是最好的答案...... – xqMogvKW

哦，我沒有在文檔中注意到這一點，感謝將它引起我的注意:) –

哇！從來沒有聽說過...真棒的東西 – Luis

要強制約束力的「實時」或按鍵更新，而不是當你離開的控制（模糊），其使用結合valueUpdate與「afterkeydown」，因爲在這裏的文檔解釋：

http://knockoutjs.com/documentation/value-binding.html

因此，在你輸入元素，你將不得不使用這樣的結合：

<input type="text" data-bind="value: myName, valueUpdate:'afterkeydown'" />

小提琴這裏：

http://jsfiddle.net/luisvsilva/ke22jfa8/1/

來源

2015-05-20 04:40:48 Luis

如何使knockoutJS實時響應屬性更改？

回答

相關問題