0

Flexslider 構成機能のビューからモデルにアクセスする必要があります (アクティブなスライドに応じていくつかのものを変更したい)。

私の問題は次this.modelのとおりです。Flexslider 関数で使用すると、バックボーン モデルではなく、明らかに Flexslider に関連する出力が得られます。

次のコードは現在動作しますが、これは 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]));
                    }
                });

どんな助けでも大歓迎です！

4

1 に答える 1

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ます。

于 2013-05-27T13:12:51.700 に答える