Question

我尝试使用this所谓的简单示例来介绍如何创建Backbone.js应用。目标是使用jQuery滑块动态更新页面上的几个字段。

但是现在，这仅在滑块停止移动并且事件处理程序报告位置/值时才有效。我想从滑块中获取值，而它的移动方式类似于mobile slider的运行方式。

第一次使用Backbone，我想我已经用尽了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"/>

修改

忘记提及我试图将slide事件添加到我的Backbone视图中的events，就像这样（无法看到任何结果，所以可能使用了错误的语法？）< / p>

    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

FYI将来解决此问题的有用语法是只注销所有事件以查看实际触发的事件。

所以你可以说出以下几点：

events: {
  "all": "log"
}

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

Answer 2

弄清楚语法。发表于：

    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",
    },

从jQuery滑块移动时获取值

2 个答案: