правильная передача ссылки на объект в классе
Я понимаю что this зависит от контекста
В функкции- классе есть несколько методов, некоторые используют дом-события, как правильно передавать ссылку на объект класса в котором эти методы реализованы, все путается this от событий, сами события, неужели везде замыкания делать, как-то неаккуратненько поллучается. Скажите, где почитать. Спасибо. |
Цитата:
И куда передавать? В обработчик события? И пример кода если можно. |
вот весь код
function Tree(id)
{
this.prepare(id);
}
Tree.prototype.prepare = function(id)
{
var container = document.getElementById(id);
var initLength = container.getElementsByTagName("li").length;
for (var i = 0; i < initLength; i++)
document.getElementById(id).getElementsByTagName("li")[i].addEventListener("click", this.clickHandler, false);
}
Tree.prototype.clickHandler = function()
{
if (this.getElementsByTagName("ul").length)
{
this.removeChild(this.getElementsByTagName("ul")[0]);
}
else
{
var clickedId = this.getAttribute("id");
var xhr = new XMLHttpRequest();
var url = "/base/loadTree?id="+clickedId;
xhr.onreadystatechange = obj.processXML;
xhr.open("get", url, true);
xhr.send(null);
}
}
Tree.prototype.processXML = function()
{
if (this.readyState != 4 || this.status != 200) return;
var xml = this.responseXML;
var length = xml.getElementsByTagName("item").length;
var ul = document.createElement("ul");
for (var i = 0; i < length; i++)
{
var li = document.createElement("li");
li.setAttribute("id", xml.getElementsByTagName("id")[i].firstChild.nodeValue);
li.innerHTML = xml.getElementsByTagName('name')[i].firstChild.data;
ul.appendChild(li);
}
document.getElementById(clickedId).appendChild(ul);
}
|
Как-нибудь так:
Tree.prototype.prepare = function(id) {
var t = this;
var container = document.getElementById(id);
var initLength = container.getElementsByTagName("li").length;
for (var i = 0; i < initLength; i++) {
document.getElementById(id).getElementsByTagName(" li")[i].addEventListener("click", function (evt) { t.clickHandler.apply(t, [t]), false);
}
}
Напишите кроссбраузерную обертку для навешивания хэндлеров, которая будет принимать ноду, ссылку на метод и ссылку на контекст исполнения метода. Такая обертка здорово облегчит жизнь в вашем стиле проектирования. |
А откуда в Tree.prototype.clickHandler
obj взялся? |
Цитата:
|
Вам наверно нужно чтобы в Tree.prototype.processXML на this была ссылка на var xhr = new XMLHttpRequest(); ?
upd: а не она там и так есть Так куда, что не передается то? |
сорри obj там случайно затесался
Т.е. вопрос, в общем как получить ссылку на Tree(желательно однократно), и где разместить код получения этой ссылки?
|
Цитата:
|
да, совершенно верно
абсолютно точно
|
Может стоит тогда ссылки на LI и XMLHttpRequest засылать как аргументы. Тогда в this будет то, что и должно в них быть. Или наоборот: первый аргумент - ссылка на текущий экземпляр, this - ссылка на LI/XMLHttpRequest.
Или вообще изврат: this - ссылка на объект с двумя свойствами, одно из которых ссылка на текущий экземпляр, а другое LI/XMLHttpRequest. |
Такое уже пробовал. В любом случае, спасибо.
Цитата:
|
а это не самый распространенный путь в memory leak'и?
node.on... = function() {
...node...
}
я так подозреваю, что не обязательно даже использовать node внутри функции |
можно id элемента в качестве параметра передавать
p.s. не понял, почему не получилось Цитата:
|
Цитата:
Цитата:
Только event, который сам по себе крепится. У event-а есть target, который в обоих случаях будет тем же this (или undefined). Значит, остается только прицепиться к this. Нужно просто то, что хочется засылать как аргументы прикреплять к будущему this как свойства. Примерно так: перед строкой document.getElementById(id).getElementsByTagName(" li")[i].addEventListener("click", this.clickHandler, false); добавить document.getElementById(id).getElementsByTagName(" li")[i].currentTree = this; и далее в Tree.prototype.clickHandler получить текущий экземпляр можно так: this.currentTree |
Цитата:
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 07:38. |