title: Knockout binding with hammer.js
body: <p>I'm trying to combine Hammer.js and knockout.js, but it seem something doesn't work.</p>
  
  <p>I used this function:</p>
  
  <pre><code>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);
          }
      }
  
  
  });
  </code></pre>
  
  <p>For example I'm trying to get drag event for every image that i have on the page so on my HTML I'm haveing that:</p>
  
  <pre><code>&lt;div class="row-fluid" data-bind="foreach: {data: picturesArray}"&gt;
      &lt;ul class="thumbnails" &gt;
          &lt;li class="img-item" data-bind="
              doubletap: img.doubletap.bind(img),
              drag: img.drag.bind(img)"&gt;                
              &lt;img  class="one-img" 
                style="width: 100px; height: 100px;" data-bind="attr: { src: img.media.m }"/&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>but it doesn't work. on my JS file, the bind methond doesn't called.</p>