如何使用刷卡骨干查看hammer.js元素 [英] How to swipe an element using hammer.js in Backbone View
问题描述
我是pretty新双方骨干和锤子，但我花了很长的时间，我还没有达到我的目标，所以，如果有人可以帮助，我会真的很感谢！
我想有这样的功能： http://jsfiddle.net/uZjCB/7/
I'm pretty new to both backbone and hammer, but it took me a long time and I still didn't achieve my goal, so if someone could help, I'd be really thankful! I want to have this functionality: http://jsfiddle.net/uZjCB/7/
但在一个骨干视图中使用它。
这是我的code迄今：
but using it in a backbone view. This is my code so far:
HTML
<html>
<head>
<title>Using backbone</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<style>
body {
overflow:hidden;
height: 100%;
}
.colorContainer {
position: relative;
padding:0 100px;
width: 40%;
border: 1px solid;
margin-top: 25px;
}
.color{
position: relative;
left: 100px;
width:50px;
height:50px;
cursor:pointer;
}
#red .color {
background: red;
}
</style>
<body>
<script type="text/template" id="template">
<div id="red" class="colorContainer">
<div class="color redColor"></div>
</div>
</script>
<div id="container"></div>
<script src="js/jquery1.9.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/jquery.hammer.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/main.js"></script>
</body>
</html>
main.js
View = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function() {
var template = _.template($("#template").html(), {} );
this.$el.html( template );
this.$el.hammer();
},
events: {
"swipe" : "swipeIt"
},
swipeIt: function(e){
if (e.direction == 'right') {
console.log("You swiped right");
}
else if (e.direction == 'left') {
console.log("You swiped left");
}
}
});
var view = new View({ el: $("#container") });
不幸的是，当我刷卡方没有显示在控制台中。任何人也有类似的问题？
Unfortunately when I swipe the square nothing is displayed in the console. Anyone had a similar issue?
推荐答案
由于Twicetimes这是通过调用，而不是仅仅e.direction e.gesture.direction，完成。例如：
Thanks to Twicetimes this is done by calling e.gesture.direction, instead of just e.direction. Example:
swipeIt: function(e){
if (e.gesture.direction == 'right') {
console.log("You swiped right");
}
else if (e.gesture.direction == 'left') {
console.log("You swiped left");
}
}
这篇关于如何使用刷卡骨干查看hammer.js元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
