Answered by:
Using Knockout.Js, how to create custom binding for textbox enter event?

Question
-
User1657665600 posted
In my single page application, i'm beginner to knockout.js. I want to create a cutom binding for textbox enter event in knockout.js.
How do create custom binding ?please provide link or simple sample for me.
Monday, August 19, 2013 3:02 AM
Answers
-
-
User1657665600 posted
ko.bindingHandlers.returnAction = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).keydown(function (e) { if (e.which === 13) { value(viewModel); } }); } };
<div><span data-bind="visible: isSearching">Searching now...</span></div> <input id="txtSearch" data-bind="value: searchText, returnAction: sendSearch" /> self.searchText = ko.observable(); self.isSearching = ko.observable(false); self.sendSearch= function (sender) { isSearching(true); // Show your searching now text $.ajax({ url: 'http://localhost/api/contacts/search', type: 'GET', dataType: 'jsonp', data: { Text: searchText() }, context: this, success: function (result) { self.Contacts(result); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }, complete: function () { $('#ListSearch').listview('refresh'); isSearching(false); // Hide searching now... } }); }
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, August 19, 2013 5:03 AM
All replies
-
-
User1657665600 posted
ko.bindingHandlers.returnAction = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).keydown(function (e) { if (e.which === 13) { value(viewModel); } }); } };
<div><span data-bind="visible: isSearching">Searching now...</span></div> <input id="txtSearch" data-bind="value: searchText, returnAction: sendSearch" /> self.searchText = ko.observable(); self.isSearching = ko.observable(false); self.sendSearch= function (sender) { isSearching(true); // Show your searching now text $.ajax({ url: 'http://localhost/api/contacts/search', type: 'GET', dataType: 'jsonp', data: { Text: searchText() }, context: this, success: function (result) { self.Contacts(result); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }, complete: function () { $('#ListSearch').listview('refresh'); isSearching(false); // Hide searching now... } }); }
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, August 19, 2013 5:03 AM