範圍內的'這'內mootools類

Question

我想在Mootools類中定義一個點擊處理程序。我的處理程序假定打開一個鏈接塊，每個鏈接都應該配備自己的點擊處理程序，這應該觸發鏈接特定的操作。我的意思是讓我們假設我有以下的HTML代碼：

<div id="wrapper"> 
    <a href="#" id="header">open options</a> 
    <div class="optionsBlock" style="display:none"> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    </div> 
</div> 

然後我想在MooTools的像這樣定義一個類：

var myHandler = new Class({ 
    Implements : [Events], 
    initialize : function(element){ 
    this.element = document.id(element); 
    this.elements = this.element.getChildren('a'); 
    this.elements.addEvents('click', function(ev){ 
     ev.preventDefault(); 
     //'this' as a reference to the current element in the array, which is being clicked, correct? 
     this.getSibling('div.optionsBlock').setStyle('display', 'block'); 
     var parentLink = this; 
     this.getSibling('div.optionsBlock').getChildren('a').addEvent('click', function(e){ 
     e.preventDefault(); 
     //should append the text of currently clicked link into the parent link 
     parentLink.appendText(this.get('text')) 
     }); 
    }); 
    } 
}); 
new myHandler('wrapper'); 

這只是我怎麼能一個例證想象中的代碼應該是這樣的（我敢肯定，這個代碼是一點都不好），但我真的需要就以下一些幫助：

1. 由於添加新的事件constatly改變了「這個」範圍，ho我應該保持對類實例和被點擊元素的引用嗎？

2. 我應該如何修改該類以便不在initialize方法中包含整個代碼？我試圖爲每個事件處理程序創建單獨的方法，但是因此我對'this'的範圍感到困惑，並且綁定並試圖將所有這些結合在一起真的讓我惱火，但是我想要掌握這些知識。

3. 如何在類中添加嵌套事件處理程序時跟蹤「this」的範圍？我老實地搜索了一個答案，但無濟於事。

謝謝！

Answer 1

範圍，隨你挑 - 問了很多很多次 - 搜索這裏[mootools]scope this：

Mootools class variable scope

mootools variable scope

Mootools - Bind to class instance and access event object

回顧一下：

1. 使用保存的參考var self = this;然後參考self.prop或使用fn.bind模式
2. 添加更多方法。遵循單一責任原則。例如，在你的班級中，創建attachEvents: function() {}並初始化該呼叫。
3. 通過使用保存的參考模式。您可以通過委派事件來修復它，而不是在父點擊上創建新的事件回調。