javascript - 如何从一个 View 获取更改值事件以触发另一个 View 中的方法

Question

如何从一个 View 获取更改值事件以触发另一个 View 中的方法？如果 JQuery slider 值发生变化，我尝试调用 DateView 中的缩放方法，但无论我如何调整它，我似乎都无法得到它。对此的任何帮助将不胜感激。

    $(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; 

Answer 1

您可以设置一个中央应用程序状态模型(Credits to this SO answer，我在遇到同样问题时发现的):

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;
},