CODEWITHSUNDEEP
javascriptjquerybackbone.jsuislider
NealR
NealR

Reputation: 10709

Update fields dynamically via jQuery slider/Backbone

I'm attempting to use this Backbone.js demo to dynamically update fields according to the slider position. However, when the updateVal handler is called it doesn't seem to recognize the .slider attribute of the DOM element. First time using Backbone/js MVC framework so any/all words of wisdom are welcome.

Here's a screen shot of the error

enter image description here

Backbone app

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

Upvotes: 0

Views: 194

Answers (1)

Japple
Japple

Reputation: 1015

Try 

 var val = this.$el.slider("option", "value");

View.el is the actual DOM object, View.$el is wrapped in a jquery object.

Upvotes: 1

Related Questions