Backbone.js 单视图 jquery 幻灯片与历史答案

【问题标题】：Backbone.js single view jquery slide with historyBackbone.js 单视图 jquery 幻灯片与历史
【发布时间】：2013-11-26 23:25:22
【问题描述】：

我有一个使用现有 div 作为元素的视图。 Div 被用作带有 next 和 pev 按钮的水平滑块...

<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() {

      }

    });

【问题讨论】：

标签： backbone.js backbone-views

【解决方案1】：

尝试使用 router.navigate 方法：

router.navigate('tab1');

和

router.navigate('tab2');

【讨论】：