Блог

В настоящее время я изучаю Backbone.js и столкнулись со странной проблемой. Я не уверен, что это правильный способ реализовать это. Я пытаюсь обернуть слайдер пользовательского интерфейса jQuery в базовое представление и модель. Однако внутри метода слайдера slide я не могу получить доступ к значениям модели. Любая помощь приветствуется. Вот мой код:

 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 });   
 })
  

Спасибо!

Это простая проблема с закрытием. slide и stop являются функциями обратного вызова, поэтому вы не можете использовать this их внутри и предполагать, что они указывают на класс view (я думаю, что в пользовательском интерфейсе jQuery это, вероятно, указывает на элемент DOM, к которому вы прикрепили ползунок — "#slider-vertical" ).

Чтобы исправить это, вам необходимо иметь ссылку на представление (или модель, если вам не нужно само представление) в области видимости при определении функций slide и stop . В вашем случае это означает, что вам нужна ссылка на переменную внутри render() :

 render : function(){
    // create a reference to the view
    var view = this;
    console.log("Rendering the slider...");
    $( "#slider-vertical" ).slider({
        // ... 
        slide: function( ui ) {
            // now use it in the slide callback
            console.log(view.model);
            view.model.set('value', ui.value);
        },
        stop: function() {
            // and here, I assume
            view.check_bounds();
        }
    });
    console.log("Finished rendering...");
}
  

this внутри ползунка относится к элементу DOM, а не к вашему представлению, заранее определите свое представление / модель.

 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();
    }
});