2013-11-26 1 views
0

У меня есть представление, которое использует существующий 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() { 

     } 

    }); 

ответ

0

Просто попробуйте использовать router.navigate метод:

router.navigate('tab1'); 

и

router.navigate('tab2'); 
+0

Я использовал его в представлении, изменения url, но нет анимации ... – ratata