Javascript 从jQuery滑块中获取值，同时执行'；他在动

我试图用一个简单的例子来说明如何创建一个Backbone.js应用程序。目标是使用jQuery滑块动态更新页面上的两个字段

但是，现在，这只在滑块停止移动且事件处理程序报告位置/值时起作用。我想在滑块移动时从中获取值，其移动方式与滑块的功能类似

第一次使用主干，我想我已经用尽了jQuery滑块上的文档。欢迎提供任何提示/提示/建议

主干应用程序

$(document).ready(function () {
    // Initialize jquery slider
    $("#slider").slider({
        value: 0,
        step: 1
    });

    // 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'.
            "slidechange": "updateVal",
        },

        updateVal: function () {
            // Get slider value and set it in model using model's 'set' method.
            console.log('SliderView.updateVal');
            console.log(this.$el.slider('value'));
            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"/>

---

找出了语法。张贴于下:

    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'.
        "slide": "updateVal",
    },

---

仅供参考，将来解决此问题的一个有用语法是注销所有事件，以查看实际触发的事件

所以你可以大致说：

events: {
  "all": "log"
}

log: function(e) {
  console.log e;
}

---

我知道你说你已经阅读了幻灯片上的文档，但听起来你只是想响应幻灯片事件，而不是幻灯片更改：啊，你说得对。我想我应该在帖子里加上这个。我尝试将

幻灯片

事件添加到主干事件处理程序，但是没有结果。可能做得不对，所以我将添加一个编辑。非常感谢。

events: {
  "all": "log"
}

log: function(e) {
  console.log e;
}