Last Updated: February 25, 2016
·
4.044K
· otupman

Knockout.js & Lungo.js - taps instead of clicks

Knockout.js provides a some "events" such as click, submit, etc.

<div data-bind="click: clickHandler"></div>

Unfortunately (or fortunately) when it comes to Lungo.js (and Quo.js) there are no clicks, just touch events. So how to solve this issue?

Knockout provides you with the data binding "event" that allows you to bind to specific events via this syntax: (taken from the KO event binding page: http://knockoutjs.com/documentation/event-binding.html)

<div data-bind="event: { tap: tapHandler}"></div>

Which would work fine, however seeing how all the interaction events will be taps it seems a little redundant to have to specify the extra blurb; the following code will create a 'tap' binding:

    ko.bindingHandlers.tap = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var callback = allBindingsAccessor().tap;
        $$(element).tap(function() {
            callback(viewModel);
        });
    }
    , update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {}
}

And to use, just replace 'click' with 'tap':

<div data-bind="tap: tapHandler"></div>

1 Response
Add your response

You can also check this - https://github.com/yaroslavya/knockouch
This plugin / extension adds touch event capability to KnockoutJS. You can add other touch event libs to it too.

over 1 year ago ·