Skip to content

Latest commit

 

History

History
59 lines (40 loc) · 2.5 KB

README.md

File metadata and controls

59 lines (40 loc) · 2.5 KB

knockouch.js

Knockouch is a javascript library that adds touch bindings to knockoutjs library. So you can work with touch events in knockout way.

Features.

  • Adds bindings for: tap, doubletap, hold, rotate, drag, transform, swipe, pinch

  • Provides touch related event data, like distance, angle etc + knockout data.

  • By default works with any of 3 touch libraries: hammer, zepto, jquery.mobile. You can also add your own touch lib see details here.

  • Detects touch library you are using automatically. You can also set specific library explicitly

Getting started

You can download the sources from github or use nuget or just type Install-Package knockouch in package manager console. Note, that nuget adds hammerjs as a default touch library.

After adding knockouch you can just start using new touch bindings, like in the example below:

<button data-bind="tap:tapHandler, hold:tapHandler, swipe:swipeHandler, doubletap:doubletapHandler">knockouch me</button>

And here is the knockoutjs model to handle it:

//your knockoutjs view model:
var model = {
            someText: ko.observable('do something with'),
            tapHandler: function (data, e) {
				//Note, event types will be tap or hold, depending on what your action will be.
                model.someText('you just ' + e.type + 'ed.');
            },
			swipeHandler: function (data, e) {
                model.someText('you just swiped!!!');
            },
			doubletapHandler: function (data, e) {
                model.someText('doubletap goes here!!!');
            }
        };
		//applying bindings as usual
        ko.applyBindings(model);

I just wanted to see some cool touch demos/how it works

Sure, you can have a look at this in chrome and firefox only or this everywhere including the latest android and iphone.

Features coming soon

  • knockout 2.x support

  • bower support

  • Provides touch related event data, like distance, angle etc + knockout data. was just added by user request.

License

MIT license - http://www.opensource.org/licenses/mit-license.php