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

How can I get a change value event from one view to trigger a method in another

本文关键字:视图 事件 方法 另一个 获取 一个      更新时间:2023-09-26

如何从一个视图获取更改值事件以触发另一个视图中的方法?如果JQuery滑块值发生变化,我试图调用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; 

您可以设置一个中央应用程序状态模型(这归功于我遇到同样问题时发现的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;
},