Javascript 通过jQuery滑块/主干动态更新字段
我正在尝试使用Backbone.js demo根据滑块位置动态更新字段。但是,当调用Javascript 通过jQuery滑块/主干动态更新字段,javascript,jquery,backbone.js,uislider,Javascript,Jquery,Backbone.js,Uislider,我正在尝试使用Backbone.js demo根据滑块位置动态更新字段。但是,当调用updateVal处理程序时,它似乎无法识别DOM元素的.slider属性。第一次使用主干/js MVC框架,因此欢迎任何/所有的智慧之言 这是错误的屏幕截图 主干应用程序 $(document).ready(function () { // Initialize jquery slider $("#slider").slider(); // Create the model clas
updateVal
处理程序时,它似乎无法识别DOM元素的.slider
属性。第一次使用主干/js MVC框架,因此欢迎任何/所有的智慧之言
这是错误的屏幕截图
主干应用程序
$(document).ready(function () {
// Initialize jquery slider
$("#slider").slider();
// Create the model class via Backbone (which sets up things like prototype objects correctly).
// This particular model is a very simple one. It'll have just 1 attribute - "slidervalue"
var SliderModel = Backbone.Model.extend({});
// A "View" abstraction for the slider.
// Whenever the slider position changes, this view updates the model with the new value.
var SliderView = Backbone.View.extend({
el: $("#slider"), // Specifies the DOM element which this view handles
events: {
// Call the event handler "updateVal" when slider value changes.
// 'slidechange' is the jquery slider widget's event type.
// Refer http://jqueryui.com/demos/slider/#default for information about 'slidechange'.
"slidestart": "updateVal",
"slidestop" : "updateVal"
},
updateVal: function () {
// Get slider value and set it in model using model's 'set' method.
console.log('SliderView.updateVal');
var val = this.el.slider("option", "value");
this.model.set({ slidervalue: val });
}
});
// The listener "View" for the model.
// Whenever the model's slidervalue attribute changes, this view receives the updated value.
var ValueView = Backbone.View.extend({
initialize: function (args) {
// _.bindAll is provided by underscore.js.
// Due to some javascript quirks, event handlers which are bound receive a 'this'
// value which is "useless" (according to underscore's docs).
// _.bindAll is a hack that ensures that 'this' in event handler refers to this view.
_.bindAll(this, 'updateValue');
console.log('ValueView.initialize');
// Bind an event handler to receive updates from the model whenever its
// 'slidervalue' attribute changes.
this.model.bind('change:slidervalue', this.updateValue);
console.log(this);
},
updateValue: function () {
// Get the slider value from model, and display it in textbox.
console.log('ValueView.updateValue');
// this.model won't work unless "_.bindAll(this, ...)" has been called in initialize
var value = this.model.get('slidervalue');
console.log(value);
$("#sliderVal").val(value);
}
});
// Create the instances
var sliderModel = new SliderModel;
var sliderView = new SliderView({ model: sliderModel });
var valView = new ValueView({ model: sliderModel });
});
HTML
<!-- "slider" is a jquery slider -->
<div id="slider"></div>
<!-- "sliderVal" displays the slider's position. It receives the value via model. -->
<input type="text" id="sliderVal" value="0"/>
试试看
View.el是实际的DOM对象,View.$el包装在jquery对象中 如果我加载了包含jquery对象的DOM的较大部分,并且我想访问该特定元素(在本例中,它将是滑块),那么我仍然需要使用
$
,如果是这样,它会在el
或滑块上吗?(或者它是这样工作的吗?)如果视图附加到一个祖先DOM对象,$el将引用该对象。您可以像$el..slider()一样访问滑块。
var val = this.$el.slider("option", "value");