Swipe action binding in knockoutjs

Question

I am using knockout as main framework in my application and it has to support tablets and mobile devices. As the framework is built on binding handlers I wonder how can custom binding to actions (like swipe and other device specific ones) be achieved, or maybe there is something like this done?

Answer 1

There are no built in bindings for specific frameworks as knockout.js has no dependencies on any other framework. It should be a trivial task to convert your jQuery selector code to binding handlers referencing the link @niko provides above.

Answer 2

1. Create a bindingHandler. Here you go an example of a real project

   ko.bindingHandlers.swipeSections = {
   init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
       var elem = $(element);
       var params = valueAccessor().split('##');
   
       elem.unbind('swipe');
   
       elem.swipe({
           swipeLeft: function (event, direction, distance, duration, fingerCount) {
               //process
           },
           swipeRight: function (event, direction, distance, duration, fingerCount) {
               //process
           }
       });
   }
   

   };

2. Using a swipe library: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

   script type="text/javascript" src="scripts/jquery.touchSwipe.js"
   

3. Define the item's binding

   div id="myid" class="section" data-bind="swipeSections: 'leftPanel##rightPanel'"
   

Answer 3

Probably too late, but here is a library that adds touch binding to knockoutjs: https://github.com/yaroslavya/knockouch

Answer 4

I dont know if it still helps, but here is a pointer.

1. Use a library like Hammer.js to get multi touch actions.
2. Write a custom binding handler and call the knockout's default event binding. something like this for a swipe. (the author of the fiddle uses tap.js)

http://jsfiddle.net/snaptopixel/spByj/

now all you do in your html is

<button data-bind="tap:doSomething">Click Me</button>​

where doSomething is a function.