I am writing an application using the backbone and got to the full anchor point and did not seem to find that the touchhend event fires in the second half.
The first time I click .slider, everything works fine. However, the second time I touch the screen to move the slides, it immediately launches the touchhend function - instead of waiting for the touchhend event. Is there a special way to communicate with sensory events and the spine?
Here is my code:
navigateTouch :function (event) { event.preventDefault(); var xOrigPos = event.originalEvent.touches[0].pageX; var startPos = parseInt($('.slider', this.$el).css('margin-left')); var xPos = event.originalEvent.touches[0].pageX; var move; var stage = this.model.get('stage'); var extraMargin = parseInt($('.graphic', this.$el).css('margin-right')); var movementSize = $('.slide', this.$el).width()+extraMargin; var narrativeSize = $('.graphic', this.$el).length; $('.slider', this.$el).on('touchmove', function (event) { event.preventDefault(); xPos = event.originalEvent.touches[0].pageX; move = (xPos + startPos) - (xOrigPos); $('.slider', this.$el).css('margin-left', move); }); $('.slider', this.$el).one('touchend', function (event) { alert('fires') event.preventDefault(); $('.slider', this.$el).unbind('touchmove'); if (xPos < xOrigPos) { stage ++; $('.slider', this.$el).animate({'margin-left': -(movementSize*stage)}); } if (xPos > xOrigPos) { stage --; $('.slider', this.$el).animate({'margin-left': -(movementSize*stage)}) } this.model.set({'stage':stage}); $('.progress', this.$el).removeClass('selected').eq(stage).addClass('selected'); }); }
my view has this in events:
events: { 'click .controls':'navigateClick', 'click .progress':'navigateProgress', 'touchstart .slider':'navigateTouch' }
and my template displays this:
<div class="slide"> <a href="#" class="button controls left"> </a> <a href="#" class="button controls right"> </a> <div class="slider clearfix"> {{#each graphic}} <div class="graphic"> <img src="{{image}}" alt="{{alt}}" title="{{graphicTitle}}"/> </div> {{/each}} </div> <div class="indicators"> {{#each graphic}} <a href="#" class="button progress"></a> {{/each}} </div> </div>
I have a feeling that this may be due to the way I am attaching events, but I cannot find anything about how to attach events within an event using the trunk.