0

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. 新しいイベントを追加すると常に「this」のスコープが変更されるため、クラス インスタンスとクリックされている要素の両方への参照を保持するにはどうすればよいですか?

  2. 初期化メソッド内にコード全体が含まれないようにするには、クラスをどのように変更すればよいですか? イベントハンドラーごとに個別のメソッドを作成しようとしましたが、結果として、「this」の範囲とバインドして混乱し、これらすべてをまとめようとすると本当にイライラしますが、この知識を把握したいと思います.

  3. クラス内にネストされたイベントハンドラーを追加するときに、「this」のスコープを追跡する方法は? 私は正直にググって答えを探しましたが、役に立ちませんでした。

ありがとう！

4

1 に答える 1

2

スコープ、あなたの選択をしてください-何度も尋ねられました-ここで検索してください[mootools]scope this：

Mootools クラス変数のスコープ

mootools 変数のスコープ

Mootools - クラス インスタンスにバインドし、イベント オブジェクトにアクセスする

要点をまとめると：

  1. 保存された参照var self = this;を使用してから参照self.propするか、fn.bindパターンを使用します
  2. メソッドをさらに追加します。単一責任の原則に従います。たとえば、クラスで、それを作成attachEvents: function() {}して初期化呼び出しを行います。
  3. 保存された参照パターンを使用して。親のクリックで新しいイベント コールバックを作成するのではなく、イベントを委任することで上流で修正できます。
于 2012-08-13T13:52:54.960 に答える