Шаблон модуля JS и вызов другой функции

Question

Так что я неоднократно сталкивался с этой ситуацией: я пишу модуль с шаблоном, но не могу вызвать одну функцию из другой (прототипированной) функции.

;(function($,window,documnet,undefined) { 
    var id, 
     _defaults = { }; 

    var MyObject = function(element,options) { 
     this.el = element; 
     this.opt = $.extend({},_defaults,options); 
     this.init(); // works fine 
    }; 

    MyObject.prototype.init = function() { 
     var self = this; 
     self.id = localStorage.getItem('myobject_id'); 
     if(self.id !== null) { 
      $('#myobject_id').val(self.id); 
     } 
    }; 


    MyObject.prototype.fetch = function() { 
     var self = this; 
     var data = { 
        action: 'program_fetch', 
        program_idx: $('#program_idx').val() 
        }; 

     // assume session is valid and has a uri in opt.callback 
     $.post(session.opt.callback, data).complete(function(r){ 
      var prog = JSON.parse(r.responseText).program; 
      self.id = prog.id; 

      $('#myobject_id').val(self.id); // this works 

      self.display();     // this does not work 
     }); 

    }; /* fetch */ 


    MyObject.prototype.display = function() { 
     var self = this; 

     $('#myobject_id').val(self.id); 

    }; /* display */ 


    $.fn.MyObject = function(options) { 
     return this.each(function(){ 
      if(!$.data(this,'plugin_MyObject')) { 
       $.data(this,'plugin_MyObject', new MyObject(options)); 
      } 
     }); 
    }; 

    window.myobject = new MyObject(); 

})(jQuery,window,document); 

Из того, что я понимаю, функции должно принести быть установки значения окна, прикрепленный экземпляр MyObject, так что, когда функция дисплея() вызывается, она имеет значение, чтобы поместить в поле ввода HTML, идентифицированное #myobject_id.

Что действительно происходит, так это состояние гонки, в течение которого значение, присвоенное self.id, является жизнеспособным, но оставляя объем обратного вызова .complete (..), значение MyObject.id больше недействительно ,

Как я должен ссылаться на эти вещи, чтобы добиться настойчивости в данных экземпляра в моем объекте?

Answer 1

;(function($,window,documnet,undefined) { 
var id, 
    _defaults = { }; 

var MyObject = function(element,options) { 
    this.el = element; 
    this.opt = $.extend({},_defaults,options); 
    this.init(); // works fine 
}; 

MyObject.prototype.init = function() { 

    id = localStorage.getItem('myobject_id'); 
    if(id !== null) { 
     $('#myobject_id').val(id); 
    } 
}; 

    MyObject.prototype.fetch = function() { 
    var data = { 
       action: 'program_fetch', 
       program_idx: $('#program_idx').val() 
       }; 

    // assume session is valid and has a uri in opt.callback 
    $.post(session.opt.callback, data).complete(function(r){ 
     var prog = JSON.parse(r.responseText).program; 
     id = prog.id; 

     $('#myobject_id').val(id); // this works 
     self.display();    // this does not work 
    }); 

}; /* fetch */ 


MyObject.prototype.display = function() { 
    $('#myobject_id').val(id); 
}; /* display */ 


$.fn.MyObject = function(options) { 
    return this.each(function(){ 
     if(!$.data(this,'plugin_MyObject')) { 
      $.data(this,'plugin_MyObject', new MyObject(options)); 
     } 
    }); 
}; 

})(jQuery,window,document); 

В этой версии я удалил шаблон использования var self = this; в пределах каждой области функции, поскольку она маскировала переменные уровня объекта с одинаковыми именами. (Невозможно установить свойства объекта через this.var?)

По-прежнему остается нерешенная проблема self.display() не работает вообще.

Answer 2

Простая истина заключается в том, что я не знал, как структурировать объект класса в JS. Вот простая модель:

;(function($,window) { 

    var self; 
    var MyClass = function(opt) { 
     self = this; 
     return self.init(opt); 
    } 

    MyClass.prototype = { 

     init: function(opt) { 
      self.opt = $.extend({},opt); 
      // other set up stuff 
      return self; 
     }, 

     display: function() { 

     }, 

     show: function() { 
      self.display(); 
     } 
    }; /* end of prototype */ 

    $.fn.myclass = function(opt) { 
     return new MyClass(opt); 
    } 

}(jQuery,window)); /* end of clas object */ 

jQuery().ready(function($) { 
    window.myInstance = $().myclass({ /* options here */ }); 
    $('#some_button').click(window.myInstance.show); 
} 

При активации кнопки #some_button вызывается метод шоу. Он, в свою очередь, вызовет метод display(). Очень просто.