1

Flight には優れたイベント システムがあり、コンポーネント ノードのイベント ハンドラーを簡単にセットアップできます。ただし、動的要素を含むノードの委任イベントに応答しようとすると、いくつかのことがわかりませんでした。

状況は次のとおりです。

   <div class="component">
       <ul id="list">
           <!-- dynamic elements show here -->
       </ul>
   </div>

およびコンポーネント:

var ItemComponent = (function() {

  function ItemComponent() {
      this.defaultAttrs({
        listSelector: '#list',
        itemSelector: '#list li'
      });

      this.addItem = function(ev, params) {
        var item = $('<li>'),
            link = $('<a href="#">').html(params.content);
        this.select('listSelector').append(item.append(link));
      };

      this.itemClick = function(ev, params) {
        console.log("Item clicked: target=", ev.target);
        console.log("Item clicked: currentTarget=", ev.currentTarget);
      };

      this.after('initialize', function() {
        this.on(document, 'uiAddListItem', this.addItem);
        this.on('click', { 'itemSelector': this.itemClick });
      });
  }

  return flight.component(ItemComponent);

})();

$('#add-item-btn').on('click', function(){
  $(document).trigger('uiAddListItem', {
    content: $('input[name="item-content"]').val()
  });
});

ItemComponent.attachTo('.component');

これは基本的に、ユーザーがliアイテムをリストに追加できるようにするだけです。それぞれに、要素<li>にラップされたコンテンツがあります。ただし、ハンドラーが実行されるときは、クリック イベントを受け取った要素では なく、<a>実際の要素にアクセスしたいと考えています。<li><a>

itemClickハンドラーでは、要素event.targetはクリックを受け取った要素 (この場合は<a>要素) です。そして、これevent.currentTargetはイベントがバインドされている実際のコンポーネントでもあります ( <div class="component">)。

<li>この場合、委任された動的要素をどのように取得しますか?

ここに作業中のJSBinがあります

4

1 に答える 1

1

そのため、オンラインの Flight.js ドキュメントでは、このようなイベントの動的で委任されたターゲットを取得することについて言及していませんでした (今見てみると、ドキュメントは最新であるため、これは実際にここで言及されています)。

しかし、見落としている人もいれば見つけにくい人もいるかもしれないので、イベントの動的なデリゲートされたターゲットは、 という名前のプロパティのイベント ハンドラーの 2 番目のパラメーターを介して取得できることに言及したいと思いますel。

したがって、ハンドラーについては、次のようにすることができます。

this.itemClick = function(ev, params) {
    console.log("Actual Target: ", params.el);
};

さて、実際に開発者が実際にそれを踏む可能性があるのに、なぜ委任されたターゲットがハンドラーのデータパラメーターに実際に詰め込まれたのか、私にはわかりません。などのイベントパラメータにアタッチする方が良いかもしれません._el。

このちょっとした情報が、Twitter の Flight.js フレームワークに移行しようとしている人々の助けになれば幸いです。

于 2014-06-06T18:34:44.340 に答える