Backbone.js single view jquery slide with history - backbone.js

Question

I have a view that uses an existing div as an element. Div is being used as a horizontal slider with next and pev buttons...
<div id='wrapperHomeScreen'>
<div id='wrapperHomeSlides'>
<div id='slideHomeScreen1' class='slideHomeScreen' >
<div> </div>
</div>
<div id='slideHomeScreen2' class='slideHomeScreen'>
<div> </div>
</div>
</div>
<a href='#tab0' id='btnMainPrev' class='btnScreenDir'></a>
<a href='#tab1' id='btnMainNext' class='btnScreenDir'></a>
</div>
In backbone view I am binding click event to the directions button, and in the event function I am using jquery to animate the slide. Now I need a way to use router with the direction buttons.
here is the view...
var HomeScreenView = Backbone.View.extend({
el:'#wrapperHomeScreen',
initialize: function() {
this.listenTo(Backbone.history, 'route', this.onRouteChanged);
},
events: {
'click .btnScreenDir': 'slide',
'click .btnHomeSlide':'slide',
},
slide: function(e) {
e.preventDefault();
target = $(event.target)
var id = target.attr('id');
var position = $('#wrapperHomeSlides').position();
router.navigate( target.attr('href'), {trigger: true} );// navigate to url
if (id == 'btnMainPrev'){
if(currentSlide != 0 ){
currentSlide -= 1;
}
}else if(id=='btnMainNext'){
if(currentSlide != homeSlidesCount - 1 ){
currentSlide += 1;
}
}
newPos = -1 * currentSlide * slideWidth;
$('#wrapperHomeSlides').animate({left: newPos}, 500);
},
onRouteChanged: function(e) {
//will i use this function?
}
});
And the router:
var Router = Backbone.Router.extend({
routes: {
"tab0": "showTab1",
"tab1": "showTab2"
},
showTab1: function() {
},
showTab2: function() {
}
});

Answer 1

Just try to use router.navigate method:
router.navigate('tab1');
and
router.navigate('tab2');