Swipe action binding in knockoutjs

问题

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?

回答1:

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

回答2:

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

};

Using a swipe library: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
```
script type="text/javascript" src="scripts/jquery.touchSwipe.js"
```

Define the item's binding

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

回答3:

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.

回答4:

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

Use a library like Hammer.js to get multi touch actions.
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.

来源：https://stackoverflow.com/questions/10446873/swipe-action-binding-in-knockoutjs

标签

javascript

javascript-events

knockout.js