Использование 'this' внутри ссылки, сгенерированной объектом javascript

Question

Javascript для меня довольно шаткий, и я не могу найти ответ на этот вопрос. У меня есть код в строках

var Scheduler = function(divid,startDate,mode){ 

    this.setHeader = function(){ 
      header.innerHTML = '<a href="#" onclick="this.showScheduler(1);">Show</a>'; 

    } 

    this.showScheduler = function period(){ 

     ... 
    } 

};

Моя проблема заключается в том, как помещать onclick в HTML так, чтобы он правильно вызывал функцию showScheduler для соответствующего экземпляра текущего объекта планировщика, с которым я работаю?

Answer 1

Вы должны использовать фреймворк для этого типа вещей. Если вы не используете его, вы должны объявить каждый экземпляр расписания как глобального объекта, и вам понадобится имя экземпляра, чтобы вызвать его из ссылки. Посмотрите на следующую ссылку

http://developer.yahoo.com/yui/examples/event/eventsimple.html

Они показывают только функция применяется, но вы также можете сделать что-то вроде этого

YAHOO.util.Event.addListener(myAnchorDom, "click", this.showScheduler,this,true); 

Где myAnchorDom является объектом ахор тег дом. Это будет иметь функцию showScheduler в пределах области вашего объекта планировщика.

Answer 2

При использовании «this» внутри атрибута onclick вы на самом деле ссылаетесь на объект тега привязки. Попробуйте это и посмотреть, если он работает:

this.setHeader = function(){ 
     header.innerHTML = '<a href="#" onclick="Scheduler.showScheduler(1);">Show</a>'; 
} 

Answer 3

Вы можете добавить обработчик событий для объекта заголовка непосредственно:

var me = this; 

this.setHeader = function(){ 
      header.innerHTML = '<a href="#" onclick="this.showScheduler(1);">Show</a>'; 

header.addHandler("click", function(e) { me.showScheduler(1); }); 
    } 

Инсайт переданная функция, это будет относиться к элементу заголовка.

Answer 4

Я бы не делать то, что вы делаете, как вы делаете это, но с кодом, как вы есть, я хотел бы сделать это (много ofdo и делать :)):

var Scheduler = function(divid, startDate, mode){ 
    var that = this; 

    this.setHeader = function(){ 
      header.innerHTML = '<a href="#">Show</a>'; 
      header.firstChild.onclick = function() { that.showScheduler(1); }; 
    } 

    this.showScheduler = function period(){ 

     ... 
    } 
}; 

Answer 5

Вместо работы с innerHTML используйте методы DOM.

Попробуйте заменить это:

header.innerHTML = '<a href="#" onclick="this.showScheduler(1);">Show</a>'; 

с этим:

var x = this; // create a closure reference 
var anchor = document.createElement('a'); 
anchor.href= '#'; 
anchor.innerHTML = 'Show'; 
anchor.onclick = function() { x.showScheduler(1); }; //don't use onclick in real life, use some real event binding from a library 
header.appendChild(anchor); 

Объяснение:

"это" в исходном коде относится к элементу, который обожженного событие, т.е. anchor («это», как известно, проблематично для таких вещей, как, например, так). Решение заключается в создании замыкания на правильном методе (поэтому вы должны создать что-то вроде var xa bove), который затем оставляет проблему пропускания в параметре, который выполняется путем обертывания метода другой функцией.

Строго говоря, было бы предпочтительнее связывать обработчики событий с парой addEventListener/attachEvent (поскольку прямое назначение события исключает возможность назначить несколько обработчиков одному событию), но лучше всего использовать эту библиотеку, например, jquery, если вы новичок для JS в любом случае.

Answer 6

var Scheduler = function(divid, startDate, mode) 
{ 
    var xthis = this; 

    this.setHeader = function() 
    { 
      var lnk = document.createElement("a"); 
      lnk.addEventListener("click", xthis.showScheduler, false); 
      lnk.innerText = "Show"; 
      lnk.setAttribute('href', "#"); 
      header.appendChild(lnk); 
    } 

    this.showScheduler = function period(){ 

     ... 
    } 
};