與hammer.js敲除綁定

Question

我想結合Hammer.js和knockout.js，但它似乎有些不起作用。

我用這個功能：

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] = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var origParams = ko.utils.unwrapObservable(valueAccessor()), 
       params = typeof(origParams) == 'function' ? {handler: origParams} : origParams, 
       hammerObj = hammer(element, params.options), 
       args = params.delegate ? [eventName, params.delegate, params.handler] : [eventName, params.handler] 

      hammerObj.on.apply(hammerObj, args); 
     } 
    } 


}); 

比如我想這應該是我在頁面上的每個圖像拖動事件等我的HTML我認爲巡航能力：

<div class="row-fluid" data-bind="foreach: {data: picturesArray}"> 
    <ul class="thumbnails" > 
     <li class="img-item" data-bind=" 
      doubletap: img.doubletap.bind(img), 
      drag: img.drag.bind(img)">     
      <img class="one-img" 
       style="width: 100px; height: 100px;" data-bind="attr: { src: img.media.m }"/> 
      </li> 
     </ul> 
    </div> 

但它不起作用。在我的JS文件中，綁定methond不會調用。

Answer 1

下面是我解決它的方法。

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> 

Answer 2

這個問題的答案組合和Calling the method provided in HTML in Knockout custom bindinghandler :)

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] = { 
    init: function(element, valueAccessor) { 
     var hammer = new Hammer(element); 
     var value = valueAccessor(); 
     hammer.on(eventName, function(e) { 
      value(e); 
     }); 
    } 
    } 
});