Backbone.js的移動滑塊 - 通過查看傳遞變量函數

Question

我下面這個教程構建移動滑塊：http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

唯一的區別是，我試圖將其納入骨幹。但是，我遇到了一個可變的問題。任何人都可以提供一些建議，如何讓這個工作。整個景觀的功能，通過這些變量的問題是：

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 

Answer 1

我會收拾這些變量放到一個模型，如：

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

然後將它傳遞給WhiteDeals查看：

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

然後accros所有功能，通過模型的吸氣劑/ 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