Here's how I solved it.
http://plnkr.co/edit/WJnPNsHQIKbbUu7oaD12?p=preview
Javascript
var events = ['tap', 'doubletap', 'hold', 'rotate',
'drag', 'dragstart', 'dragend', 'dragleft', 'dragright', 'dragup',
'dragdown', 'transform', 'transformstart',
'transformend', 'swipe', 'swipeleft', 'swiperight',
'swipeup', 'swipedown', 'pinch', 'pinchin', 'pinchout'];
ko.utils.arrayForEach(events, function (eventName) {
ko.bindingHandlers[eventName] = {
update: function(element, valueAccessor){
var BindingContext = valueAccessor()[0];
var EventToFire = valueAccessor()[1];
var options = {
dragLockToAxis: true,
dragBlockHorizontal: true
};
var hammerTime = new Hammer(element, options);
hammerTime.on(eventName, function(ev){
//Fire the event with the item it was bound to.
EventToFire(BindingContext);
});
}
}
});
Html
<div data-bind="foreach: Elements">
<!-- send yourself and the binding event to the "drag" handler -->
<div class="square" data-bind="drag: [$data, $parent.Drag]">
<div data-bind="text: Test"></div>
</div>
</div>