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（或Underscore的某些实现）绑定上下文（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。

如何解决Flexslider模型和Backbone模型之间的名称冲突？

1 个答案: