touch bindings for knockoutjs

[Yaroslav Yakovlev]

Hello, all!

I`ve just committed a project at https://github.com/yaroslavya/knockouch

Its a library that adds touch bindings to knockoutjs, so that you could handle touch events using the default binding syntax, like so:

<button data-bind="tap:tapHandler, hold:holdHandler, swipe:swipeHandler, doubletap:guessWhatHandler">touch me</button>

Currently it works with hammer, zepto and jquery.mobile only, but adding a new touch library is quite easy.

You can have a look at demos here, here or the very basic one here

Would like to hear your feedback. 

All the best and I hope you find it usefull :-)

[Voltron]

Cool! :)

On Apr 6, 5:47 pm, Yaroslav Yakovlev <yarosla...@gmail.com> wrote:
> Hello, all!
>

> I`ve just committed a project athttps://github.com/yaroslavya/knockouch

> Its a library that adds touch bindings to knockoutjs, so that you could
> handle touch events using the default binding syntax, like so:
>

> *<button data-bind="tap:tapHandler, hold:holdHandler, swipe:swipeHandler,
> doubletap:guessWhatHandler">touch me</button>*

>
> Currently it works with hammer, zepto and jquery.mobile only, but adding a
> new touch library is quite easy.

> You can have a look at demos here<http://htmlpreview.github.com/?https://github.com/yaroslavya/knockouc...>
> , here<http://htmlpreview.github.io/?https://github.com/yaroslavya/knockouch...> or
> the very basic one here<http://htmlpreview.github.com?https://github.com/yaroslavya/knockouch...>

[Matt Cooper]

Hi Yaroslav,

Looks very promising. Started to work with it this morning and got basic
tap functionality working in no time. Thanks!

However, I have run into a problem when binding multiple objects with a
foreach. The Knockout docs say "When calling your handler, Knockout will
supply the current model value as the first parameter" but I only receive
the Hammer event in the handler.

Am I doing something wrong? Do you know of a way to pass the current item
on a tap event?

Thanks for the great work

Matt

[Matt Cooper]

OK. I am having some success with the bind method. But I have to pass the
$data object twice...

$parent.joinGroup.bind($data, $data)

Then in the handler...

function joinGroup(data, event)

It seems that the event is always last in the arguments list. So bind($data,
$data, 'd1, 'd2') would result in function joinGroup(data, d1, d2, event). Is
there a way to ensure that event is always first? Would be more consistent.

I'll keep playing ;)

Thanks again

[Patrick Steele]

That's the way javascript's "bind" method works.  The first argument is always the "this" context for the function.  The rest of the arguments become the actual arguments to the function call.

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

---
Patrick Steele
http://weblogs.asp.net/psteele

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Matt Cooper]

Thanks Patrick. Of course. I'm not insane then :)

[Yaroslav Yakovlev]

Hi, Matt!

Here`s the way to access item that was tapped/swiped or anything else. http://jsfiddle.net/yaroslavya/Fpwe2/

So the main idea is to get the target property from the event data and use it. I`m going to add accessed element as a separated parameter,

or to the event arguement data in next version. If you have any preferences - let me know, I`m going to release on a weekend.

Thanks again for your feedback.

Best regards,

Yaroslav Yakovlev.

[Matt Cooper]

Hi Yaroslav!

Thanks for getting back to me so quickly (:D

That isn't actually want I need. My foreach binding is based on an
observableArray of value objects, in this case room groups in a games lobby.
The click binding passes the associated VO for each group to the handler so
that it can switch groups.

<div id="groups" data-bind="foreach: { data:groups(), as: 'group'}">
<div class="groupTab" data-bind="click: $parent.joinGroup>
<span class="groupName" data-bind="text: group.name"></span>
</div>
</div>

...

function joinGroup(groupVO)
{
_model.currentGroup(groupVO);
}


I guess I could search through the groups array based on the groupName using
your example. But, as it is, the bind($data, $data) method will work.

Thanks again

Matt

[Yaroslav Yakovlev]

Hi, Matt!

Just updated the sources and made a small demo: 

http://htmlpreview.github.io/?https://github.com/yaroslavya/knockouch/blob/master/knockouch/demo/people_knockouched.html

Currently touch bindings will behave as knockout bindings, so you will have event data that will contain touch related data

and data that will contain knockout element that was touched. Demo source code can explain it better :-).

Let me know if it will work for you.

Best regards,

Yaroslav Yakovlev.

[Matt Cooper]

Yaroslav,

Works perfectly. I can't see the code for your example, but this is how my
code looks now.

<div id="groups" data-bind="foreach: { data:groups, as: 'groupVO'}">
<div class="groupTab" data-bind=" tap: $parent.joinGroup">
<span class="groupName" data-bind="text: groupVO.name"></span>
</div>
</div>

...

that.joinGroup = function (groupVO, event)
{
currentGroup(groupVO);
}

Apart from the additional Hammer event (which is very useful obviously) you
can't even tell it isn't a standard custom binding.

Great work (:D