1

我对骨干和锤子都很陌生，但是花了我很长时间，我仍然没有实现我的目标，所以如果有人可以提供帮助，我将非常感激！我想要这个功能：http: //jsfiddle.net/uZjCB/7/

但在主干视图中使用它。到目前为止，这是我的代码：

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

不幸的是，当我滑动方块时，控制台中没有显示任何内容。有人有类似的问题吗？

4

1 回答 1

2

感谢 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-08T10:47:17.517 回答