调用function，进入按键

当input键被按下时，如何使用knockout.js调用一个函数..下面是我的代码。

ko.bindingHandlers.enterkey = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var inputSelector = 'input,textarea,select'; $(document).on('keypress', inputSelector, function (e) { var allBindings = allBindingsAccessor(); $(element).on('keypress', 'input, textarea, select', function (e) { var keyCode = e.which || e.keyCode; if (keyCode !== 13) { alert('a'); return true; } var target = e.target; target.blur(); allBindings.enterkey.call(viewModel, viewModel, target, element); alert('b'); return false; }); }); } }; ko.applyBindings(viewModel); 

HTML

 <input type="text" data-bind="value:sendMessageText, enterkey: sendMessage" /> 

视图模型

 function contactsModel(){ var self = this; self.jid=ko.observable(); self.userName=ko.observable(); self.sendMsgText=ko.observable(); self.sendMessage = function(){ if(self.sendMessageText() == '' ) alert("Enter something in input field"); else{ var message = { to : self.userName(), message : self.sendMsgText() } self.sentMessages.push(message); sendMessage(message); } } } 

任何想法是关于什么是错误的或更好的方法的build议。

Answer 1

当你创build自己的knockout bindingHandler时，它和其他bindingHanlders的用法相同，例如： data-bind="text: myvalue"

所以你的HTML需要看起来像这样

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

要添加的重要绑定是valueUpdate: 'afterkeydown'绑定。 如果在用户在input中input文本并点击时没有此绑定inputonblur事件不会在enterkey绑定之前enterkey 。 如果在由enterKey调用的操作中访问input的值，这将导致observable返回一个意外的值，而不是当前的文本。

另一个看KnockoutJS的自定义绑定

编辑
这是我以前在其他项目上使用过的。 JsFiddle演示

 ko.bindingHandlers.enterkey = { init: function (element, valueAccessor, allBindings, viewModel) { var callback = valueAccessor(); $(element).keypress(function (event) { var keyCode = (event.which ? event.which : event.keyCode); if (keyCode === 13) { callback.call(viewModel); return false; } return true; }); } }; 

Answer 2

不需要自定义绑定，只需使用knockout的按键事件（ Knockout文档 ）：

 <input type="text" data-bind="textInput : keyword, event: {keypress: onEnter}" > </input> 

而你的function：

 that.onEnter = function(d,e){ e.keyCode === 13 && that.search(); return true; }; 

JSFiddle示例

编辑：从淘汰赛（3.2.0）的新绑定：textInput – 避免需要有一个valueUpdate绑定。

Answer 3

这工作对我来说，感谢@DaafVader的大部分。

在视图中

 <input data-bind="value: searchText, valueUpdate: 'input', event: { keyup: searchKeyUp }" /> 

在viewmodel中

 var searchKeyUp = function (d, e) { if (e.keyCode == 13) { search(); } } 

Answer 4

这对我来说很有用，感谢@DaafVader。

鉴于：

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

在javascript中：

 $("#myInput").keyup(function (event) { if (event.keyCode == 13) { search(); } }); 

把关键事件放到你的jquery事件中而不是敲除事件中，可以减lessknockout viewmodel的复杂性。

Answer 5

在input的表单上使用提交绑定（ http://knockoutjs.com/documentation/submit-binding.html ），这就是它的目的。

Knockout文档示例：

 <form data-bind="submit: doSomething"> ... form contents like inputs go here ... <button type="submit">Submit</button> </form> <script type="text/javascript"> var viewModel = { doSomething : function(formElement) { // ... now do something } }; </script> 

如果有的话，它也会自动处理你的button。