0

あるビューから変更値イベントを取得して、別のビューでメソッドをトリガーするにはどうすればよいですか? JQueryスライダーの値が変わったらDateViewでzoomメソッドを呼ぼうとしているのですが、いくらいじっても取れないようです。これに関する助けをいただければ幸いです。

    $(document).ready(function() {
        var zoom = 1; 
        $( "#slider-vertical" ).slider({
          orientation: "vertical",
          range: "min",
          min: 1,
          max: 32,
          value: 1,
          slide: function( event, ui ) {
            var zoom = ui.value
          }
        });


var SliderModel = Backbone.Model.extend({});


var SliderView = Backbone.View.extend({
    el:$('#slider-vertical'), // Specifies the DOM element which this view handles
    events : {
        "slidechange" : "updateVal"  
    },

    updateVal : function() {
        var val = this.$el.slider("option", "value");
        this.trigger('valueChange' [{value: val}])
        this.model.set({slidervalue : val});
    }
});


    var DateHeader = Backbone.Model.extend({});

    var DateHeaders = Backbone.Collection.extend({
        model: DateHeader,
        localStorage: new Backbone.LocalStorage("timeline"),

        initialize: function() {

            this.start_date = 1800;
            this.end_date = 2013;
            this.date_header_pixal_spacing = 200;
            this.date_val = Math.pow(zoom, 2);
            // this.bind('change:slidervalue', this.zoom)
        },
        setup: function() {

            if(zoom%4 == 0){
                this.date_header_pixal_spacing = 200;
            } else {
                increase = 50*(zoom%4);
                this.date_header_pixal_spacing += increase; 
            }

            counter = 0
            that = this
            for(i=this.start_date; i<=this.end_date; i+=this.date_val) {
                that.add([{
                    date: i,
                    top: that.date_header_pixal_spacing*counter
                }])
                counter++; 
            }
        },

        zoom:function()
        {
            // console.log('the collection got called!')
        }



    });

    sliderModel = new SliderModel;
    sliderView = new SliderView({model : sliderModel});

    var DateView = Backbone.View.extend({

        el:'.time',

        events: {
            'valueChange':'zoom'

        },

        initialize: function() {
            this.dateHeaders = new DateHeaders
            this.dateHeaders.setup(); 
            this.render();
            this.zoom = 1;

        },

        render: function() {
            var template = _.template($('#date_header').html(), {dateHeaders: this.dateHeaders.models});
            this.$el.html(template);
            this.$el.css('height',this.dateHeaders.last().get('top')+'px')


        },
        zoom: function() {
            console.log('the update val got called!')
        }

    })

    dateView = new DateView;
4

1 に答える 1

3

中央のアプリケーション状態モデルを設定できます（同じ問題が発生したときに見つけたこのSOの回答へのクレジット）：

var app_state = Backbone.Model.extend();

SliderView は app_state の valueChange 属性を設定します。

updateVal : function() {
  var val = this.$el.slider("option", "value");
  app_state.set('valueChange', [{value: val}])
  this.model.set({slidervalue : val});
}

そして、DateView は app_state の valueChange 属性をリッスンします。

initialize: function() {
  this.dateHeaders = new DateHeaders
  this.dateHeaders.setup(); 
  this.listenTo(app_state, "change:valueChange", this.zoom); 
  this.render();
  this.zoom = 1;
},
于 2013-08-11T08:00:35.450 に答える