JQuery, простое наследование и «это»

Question

, поэтому я пытаюсь использовать javascript с «простым наследованием» (согласно http://ejohn.org/blog/simple-javascript-inheritance/). для «упрощения» вещей, моя идея состояла в том, чтобы создавать объекты и прикреплять их к элементам, чтобы я мог работать с ними;

var Pane = Class.extend({
    init: function( el ) {
        this.el = el; this.$el = $(el);
        return this;
    },

    do_something: function() {
        this.$el.html('doing something!');
        $.getJSON( '/somewhere.js', function(data){
            // write something to $el
        });
    }
});

и у меня будет html вроде

<div id="my_div"></div>
<script>
    var p = new Pane( $('#my_div') )
    p.do_something()
</script>

к сожалению, в вызове ajax 'this' становится объектом jquery, а не объектом Pane, поэтому я не могу обновить$ el / my_div (а также делает мою идею несколько бессмысленной). Любые идеи, как я могу получить доступ к объекту в вызове getJSON?

Answer 1

Просто используйте замыкание (скопируйте this в другую переменную снаружи)

    ...
    do_something: function() {
        this.$el.html('doing something!');
        var that = this; //Copy 'this' to 'that'
        $.getJSON( '/somewhere.js', function(data){
            that.$el.html("..."); //use 'that' instead of 'this' here
        });
    }

Другой способ - использовать jQuery $.proxy (который изменяет контекст функции).Как это:

     ...
     do_something: function() {
         this.$el.html('doing something!');            
         $.getJSON( '/somewhere.js', $.proxy( function(data){  //Here we proxy
             this.$el.html("..."); //use 'this' normally
         }, this));  //Using 'this' as context
     }

Answer 2

Если вы хотите пойти с наследованием, вы можете создать базовый класс, который может создавать обратные вызовы, связанные с его экземплярами, например:

var Bindable = Class.extend({
    bind: function( fn ) {
        var that = this;
        return function(){ return fn.apply( that, arguments ); };
    }
}

Теперь вы можете расширить этот класс и использовать его метод связывания для создания обратных вызовов

// extend Bindable
var Pane = Bindable.extend({
    init: function( el ) {
        this.el = el; this.$el = $(el);
        // don't return this, it's incorrect;
        //return this;
    },

    handleData: function( data ) {
        // grab an imaginary key from the data for demo purposes
        var stuff = data.key;
        this.$el.html( stuff );
    },

    do_something: function() {
        this.$el.html('doing something!');
        $.getJSON( '/somewhere.js', this.bind( this.handleData ) );
    }
});

Answer 3

Разве вы не можете просто сохранить это значение в переменной внутри do_something перед вызовом getJSON:

var currentpane = this;