如何从一个视图获取更改值事件以触发另一个视图中的方法
How can I get a change value event from one view to trigger a method in another
如何从一个视图获取更改值事件以触发另一个视图中的方法?如果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;
},
相关文章:
- 取消绑定主干视图事件
- 更改el属性时未激发主干视图事件
- angularjs中的SyncFusion树视图事件
- 在视图被替换后,主干视图事件未激发,然后放回页面上
- 主干视图事件绑定较晚
- 主干视图事件未触发 - 不知道原因
- Aurelia:调整大小/布局更改视图事件
- 主干 - 在模型更改时取消注册视图事件
- 在单页应用程序上实现Google Analytics页面视图事件的行为很奇怪
- 单击时呈现视图事件
- 木偶的复合视图事件未触发
- 主干,触发视图事件
- 主干视图事件仅在视图呈现后触发一次
- Dropzone.js AMD内部Backbone视图事件
- 提升骨干.js视图事件
- ExtjsMVC嵌套视图事件和异步函数
- 复选框和标签的主干视图事件处理程序
- 主干-从子视图触发父视图事件
- 骨干视图事件没有触发
- 在父元素上注册视图事件