У меня есть представление, которое использует существующий div как элемент. Div используется в качестве горизонтального слайдера с следующей и п кнопкой ...Backbone.js single view jquery slide с историей
<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>
В связи магистрального я связывание события нажатия на кнопку направления, а также в функции события Я использую JQuery для анимации слайда. Теперь мне нужен способ использовать маршрутизатор с кнопками направления.
здесь вид ...
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?
}
});
И маршрутизатор:
var Router = Backbone.Router.extend({
routes: {
"tab0": "showTab1",
"tab1": "showTab2"
},
showTab1: function() {
},
showTab2: function() {
}
});
Я использовал его в представлении, изменения url, но нет анимации ... – ratata