如何解決Flexslider模型和Backbone模型之間的名稱衝突？

Question

我需要從Flexslider配置功能的視圖中訪問模型（我想根據哪個幻燈片處於活動狀態來更改某些內容）。

我的問題是：當我在Flexslider函數中使用this.model時，我得到的輸出顯然與Flexslider相關，而不是Backbone模型。

下面的代碼當前有效，但這是因爲MySlider對象是可以在任何地方訪問的全局對象。顯然，這不是一個好習慣，所以我想通過直接訪問Flexslider配置中的視圖模型來替換它。

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'handlebars', 
    'app/views/slide.view', 
    'flexslider', 
    'widget', 

    'templates' 
], 
    function($, _, Backbone, Handlebars, SlideView, FlexSlider, Widget) { 

     var SliderView = Backbone.View.extend({ 

      el: '#slider-wrapper', 

      template: Handlebars.templates.slider, 
      widget: Handlebars.templates.widget, 
      test: this, 

      initialize: function() { 
       this.model.on('change', this.render, this); 
      }, 

      render: function() { 

       var that = this, 
        startAtIndex = 0, 
        i = 0, 
        live = false, 
        firstInLine = false; 

       console.log('Rendering slider...'); 

       this.liveChanges = [false, false, false, false, false]; 

       this.$el.html(this.template({ slides: this.model.toJSON() })); 
       console.warn(this.model.toJSON()); 

       _.each(this.model.models, function(slide) { 

        var slideView = new SlideView({ el: '#' + slide.get('id'), model: slide }); 

        slideView.render(); 


        if (slide.isLive()) 
        { 
         that.liveChanges[i] = true; 
         startAtIndex = i; 
         live = true; 
        } 

        // if no live set next program in line 

        if (!firstInLine && !live && (slide.get('started_at_real') > new Date().getTime()/1000)) 
        { 
         startAtIndex = i; 
         firstInLine = true; 
        } 
        i++; 
       }); 

       // Init slider 

       $('.flexslider').flexslider({ 
        animation: "slide", 
        controlNav: 'thumbnails', 
        directionNav: true, 
        slideshow: false, 
        slideshowSpeed: 4000, 
        pauseOnHover: true, 
        startAt: startAtIndex, 
        touch: true, 
        animationLoop: true, 
        start: function(slider){ 

         // trigger window resize => flexslider bug fix = not starting at startAtIndex 
         $(window).resize(); 

         // Set thumbnail background 

         var bgHeight = $('.flexslider').find('#thumb-0').height(); 

         $('.flex-control-thumbs').css('height', bgHeight); 
         MySlider.currentSlide = slider.currentSlide; 
         $('.widget').html(Handlebars.templates.widget(MySlider.widgets[slider.currentSlide])); 

        }, 
        after: function(slider) { 
         // todo: this fires when the animation completes, should fire on start instead 

         MySlider.currentSlide = slider.currentSlide; 
         $('.widget').html(Handlebars.templates.widget(MySlider.widgets[slider.currentSlide])); 
        } 
       }); 

任何幫助將不勝感激！

Answer 1

使用bind（或下劃線部分實現）結合上下文（this將MySlider或您的滑塊來看，由於在我的例子）：

start: (function(slider){ 
    // do some stuff... 
    this.model.currentSlide = slider.currentSlide; 
}).bind(this) 

或者使用that VAR的聲明。

start: function(slider){ 
    // do some stuff... 
    that.model.currentSlide = slider.currentSlide; 
} 

假設MySlider是SliderView。