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.

Answer 1

User-306750178 posted

Hi,

Refer below links

http://knockoutjs.com/documentation/custom-bindings.html

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

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

http://stackoverflow.com/questions/5506071/bind-custom-event-to-javascript-object

Answer 2

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...
        }
    });
}