Javascript Backbone.js移动滑块-通过视图函数传递变量

我将按照本教程构建移动滑块：

唯一的区别是，我正试图把它整合到主干中。然而，我遇到了一个可变的问题。有谁能提供一些建议，如何让这个工作。在视图的函数中传递这些变量是一个问题：

var sliding = startClientX = startPixelOffset = pixelOffset = currentSlide = 0,
slideCount = $('.slide').length;

完整主干视图：

WhiteDeals.Views.EditorView = Backbone.View.extend({

initialize: function() {
    _.bindAll(this, 'render', 'slideStart', 'slide');

    var sliding = startClientX = startPixelOffset = pixelOffset = currentSlide = 0,
    slideCount = $('#dealSlide').length;

},

events: {
    "touchstart"             : "slideStart",
    "mousedown"              : "slideStart",
    "mouseup"                : "slideEnd",
    "touchend"               : "slideEnd",
    "mousemove"              : "slide",
    "touchmove"              : "slide"
},

slideStart: function(event) {
    if (event.originalEvent.touches)
      event = event.originalEvent.touches[0];
    if (sliding == 0) {
      sliding = 1;
      startClientX = event.clientX;
    }
}, // End slideStart

slide: function(event) {
    event.preventDefault();
    if (event.originalEvent.touches)
        event = event.originalEvent.touches[0];
        var deltaSlide = event.clientX - startClientX;

    if (sliding == 1 && deltaSlide != 0) {
      sliding = 2;
      startPixelOffset = pixelOffset;
    }

    if (sliding == 2) {
      var touchPixelRatio = 1;
      if ((currentSlide == 0 && event.clientX > startClientX) ||
          (currentSlide == slideCount - 1 && event.clientX < startClientX))
        touchPixelRatio = 3;
      pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio;
      $('#dealSlider').css('transform', 'translate3d(' + pixelOffset + 'px,0,0)').removeClass();
    }
},

slideEnd: function(event) {
    if (sliding == 2) {
        sliding = 0;
        currentSlide = pixelOffset < startPixelOffset ? currentSlide + 1 : currentSlide - 1;
        currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1);
        pixelOffset = currentSlide * -$('body').width();
        $('#temp').remove();
        $('<style id="temp">#dealSlider.animate{transform:translate3d(' + pixelOffset + 'px,0,0)}</style>').appendTo('head');
        $('#dealSlider').addClass('animate').css('transform', '');
    }
}, // End slideEnd

render: function() {
    this.$el.html(JST['editor/view']());
    return this;
}

}); // End of Views EditorView

WhiteDeals.Views.EditorView=Backbone.View.extend({
初始化：函数（）{
_.bindAll（这是“渲染”、“幻灯片开始”、“幻灯片”）；
var Slide=startClientX=startPixelOffset=pixelOffset=currentSlide=0，
slideCount=$（'#dealSlide'）。长度；
},
活动：{
“touchstart”：“slideStart”，
“mousedown”：“slideStart”，
“鼠标”：“幻灯片”，
“触摸端”：“幻灯片”，
“鼠标移动”：“幻灯片”，
“触摸移动”：“滑动”
},
slideStart:函数（事件）{
if（event.originalEvent.touchs）
event=event.originalEvent.touch[0]；
如果（滑动==0）{
滑动=1；
startClientX=event.clientX；
}
}，//结束滑动开始
幻灯片：功能（事件）{
event.preventDefault（）；
if（event.originalEvent.touchs）
event=event.originalEvent.touch[0]；
var deltaSlide=event.clientX-startClientX；
如果（滑动==1&&deltaSlide！=0）{
滑动=2；
startPixelOffset=像素偏移；
}
如果（滑动==2）{
var-touchPixelRatio=1；
if（（当前幻灯片==0&&event.clientX>startClientX）||
（currentSlide==slideCount-1&&event.clientX

我会将这些变量打包到模型中，如：

var CoordsModel = Backbone.Model.extend({})
var coord = new CoordsModel();

然后将其传递到

WhiteDeals

视图：

var view = new WhiteDeals({model: coord});

然后访问所有函数，通过模型的getter/setter，我可以访问其变量，例如：

initialize: function() {
    _.bindAll(this, 'render', 'slideStart', 'slide');

    // var sliding = startClientX = startPixelOffset = pixelOffset = currentSlide = 0

    this.model.set('sliding', 0);
    this.model.set('startClientX', 0);
    ...
    this.model.set('currentSlide', 0);

    slideCount = $('#dealSlide').length;

},
...
slideStart: function(event) {
    if (event.originalEvent.touches)
        event = event.originalEvent.touches[0];
    if (sliding == 0) {
        // sliding = 1;
        // startClientX = event.clientX;
        this.model.set('sliding', 1);
        this.model.set('startClientX', event.clientX);
    }
}, // End slideStart

---

一种可能的解决方案可能是将touchstart事件和功能保留在eventdelegator中。然后在touchstart的功能以及所有子功能中添加touchmove和touchstop的事件侦听器。仅供参考–对于希望在主干中添加出色的移动触摸滑块的人，我最终选择了Swipe.js。它很容易安装，性能也很好。