Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to swipe an element using hammer.js in Backbone View
    primarykey
    data
    text
    <p>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: <a href="http://jsfiddle.net/uZjCB/7/" rel="nofollow">http://jsfiddle.net/uZjCB/7/</a> </p> <p>but using it in a backbone view. This is my code so far:</p> <p><strong>HTML</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Using backbone&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt; &lt;/head&gt; &lt;style&gt; 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; } &lt;/style&gt; &lt;body&gt; &lt;script type="text/template" id="template"&gt; &lt;div id="red" class="colorContainer"&gt; &lt;div class="color redColor"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/script&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;script src="js/jquery1.9.js"&gt;&lt;/script&gt; &lt;script src="js/underscore.js"&gt;&lt;/script&gt; &lt;script src="js/backbone.js"&gt;&lt;/script&gt; &lt;script src="js/jquery.hammer.js"&gt;&lt;/script&gt; &lt;script src="js/modernizr.js"&gt;&lt;/script&gt; &lt;script src="js/main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>main.js</strong></p> <pre><code>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") }); </code></pre> <p>Unfortunately when I swipe the square nothing is displayed in the console. Anyone had a similar issue?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload