javascript - 在 jQuery slider 移动时获取其值

Question

我正在尝试使用 this据称是有关如何创建 Backbone.js 应用程序的简单示例。目标是使用 jQuery slider 动态更新页面上的几个字段。

但目前，这仅在 slider 停止移动并且事件处理程序报告位置/值时才有效。我想从 slider 获取值而它的移动方式与 mobile slider 类似。似乎起作用了。

第一次使用 Backbone，我想我已经用尽了 jQuery slider 的文档。非常欢迎任何提示/技巧/建议。

主干应用

$(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"/>

编辑

忘记提及我尝试添加 slide事件到我的 Backbone View 中的 events ，如下所示(无法看到任何结果，因此可能使用了错误的语法？)

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

Answer 1

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

所以你可以这样说:

events: {
  "all": "log"
}

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