locked
Using Knockout.Js, how to create custom binding for textbox enter event? RRS feed

  • 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