使用hammer.js实现Knockout绑定

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文件中，bind方法没有被调用。

- user3488885

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>

- djbielejeski

---

不必手动传递 $data 和 $parent，最好通过绑定的第五个 bindingContext 参数访问它们：update: function(element, valueAccessor, allBindings, viewModel, bindingContext)。 - janfoeh

Answer 2

结合这个问题和在Knockout自定义绑定处理程序中调用HTML提供的方法的答案 :)

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

- RAGHU RAMAN