如何使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实时响应属性更改？

回答

相关问题