Javascript 使用hammer.js进行敲出绑定
我试图将Hammer.js和knockout.js结合起来,但似乎有些东西不起作用 我使用了这个函数:Javascript 使用hammer.js进行敲出绑定,javascript,jquery,knockout.js,hammer.js,Javascript,Jquery,Knockout.js,Hammer.js,我试图将Hammer.js和knockout.js结合起来,但似乎有些东西不起作用 我使用了这个函数: var events = ['tap', 'doubletap', 'hold', 'rotate', 'drag', 'dragstart', 'dragend', 'dragleft', 'dragright', 'dragup', 'dragdown', 'transform', 'transformstart', 'transformend', 'swipe',
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文件中,绑定方法没有调用。下面是我如何解决它的 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
此问题的综合答案和:)
与其手动传递
$data
和$parent
,不如通过第五个bindingContext
参数将其访问到绑定:update:function(元素、值访问器、所有绑定、视图模型、绑定上下文)
<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>
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);
});
}
}
});