如何在主幹視圖中使用hammer.js刷一個元素

我對骨幹和錘子都很新，但是花了很長時間，我仍然沒有達到目標，所以如果有人能夠幫助我，真的很感謝！我想要這個功能：http://jsfiddle.net/uZjCB/7/如何在主幹視圖中使用hammer.js刷一個元素

但在骨幹視圖中使用它。這是我到目前爲止的代碼：

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

不幸的是，當我刷卡方沒有顯示在控制檯中。任何人都有類似的問題？

來源

2013-07-03 Marko Ćilimković

沒有人知道嗎？：/ –

你可以在swipeIt函數內添加一個'console.log（'swiped'）來確認它是否被觸發了嗎？（例如：不在if/else內） – Twicetimes

試過了，它工作。輸入的字符串顯示在控制檯中。 –

感謝兩次這是通過調用e.gesture.direction，而不是隻是e.direction。例如：

swipeIt: function(e){ 
if (e.gesture.direction == 'right') { 
    console.log("You swiped right"); 
} 
else if (e.gesture.direction == 'left') { 
    console.log("You swiped left"); 
} 
}

來源

2013-07-08 10:47:17

如何在主幹視圖中使用hammer.js刷一個元素

回答

相關問題