Question

I’m currently learning Backbone.js and have run into a strange issue. I’m not sure if this is the proper way to implement this. I am trying to wrap a jQuery UI Slider in a backbone view and model. However, inside of the slider’s slide method I can’t access the model’s values. Any help is appreciated. Here is my code:

var SliderView = Backbone.View.extend({
initialize: function(){
    console.log("Creating the slider view...");
    _.bindAll(this, 'render');
    this.render();

},

render : function(){
    console.log("Rendering the slider...");
    $( "#slider-vertical" ).slider({
        orientation: "vertical",
        animate: true,
        range: "min",
        min: 0,
        max: 50,
        value: this.model.get('value'),
        disabled: this.model.get('disabled'),
        animate_if_programmed: true,
        slide: function( ui ) {
            console.log(model);
            this.model.set('value', ui.value);
        },
        stop: function() {
            this.check_bounds();
        }
    });
    console.log("Finished rendering...");
}
 })


var SliderModel = Backbone.Model.extend({
initialize : function(args) {
    console.log("Creating the slider model...");
},
defaults : {
    disabled : false,
    value: 8,
    position: 0
}
 });

 $(function(){
var sliderModel = new SliderModel();
var slider = new SliderView({ el: $( "#slider-vertical" ), model: sliderModel });   
 })

Thanks!

Answer 1

this within the slider refers to the DOM element and not your view, define your view/model before hand.

render : function(){
console.log("Rendering the slider...");
var v = this;
var m = this.model;
$( "#slider-vertical" ).slider({
    orientation: "vertical",
    animate: true,
    range: "min",
    min: 0,
    max: 50,
    value: m.get('value'),
    disabled: m.get('disabled'),
    animate_if_programmed: true,
    slide: function( ui ) {
        console.log(model);
        m.set('value', ui.value);
    },
    stop: function() {
        v.check_bounds();
    }
});