1

次のコードを使用して、2つのunderscore.jsテンプレートをロードしています。最初のリンクをクリックすると、スケルトンテンプレートが読み込まれます。最初のトリガーはfindbindを実行し、loadBookmarks関数を正しく実行しますが、「loaded」トリガーは起動せず、loadFriendBookmarksは実行されません。どうしてこれなの？これを実現する別の方法はありますか？

$('#bookmarks-link').click(function() {
  $('#bookmarks-count').text("0");
  var skeleton = modalTemplate();
  $('#bookmarks').append(skeleton);
  $('#bookmarks').trigger('skeleton');
});

$('#bookmarks').bind('skeleton', function() {
  $('#bookmarks .thumbnails').loadBookmarks( getBookmarksUrl(1) );
  // If I add an alert('hi') here, it works perfectly.
  $('#bookmarks').trigger('loaded');
});

$('#bookmarks').bind('loaded', function() {
  $('#bookmarks .thumbnails a').each(function() {
    $(this).bind('click', function() {
      $('#bookmarks .bookmarks-table tbody').empty();
      $('#bookmarks .bookmarks-table tbody').loadFriendBookmarks(
        getFriendBookmarksUrl($(this).attr('data-item'))
      );
    });
  });
});

非常に興味深いことに、トリガーは正しく機能します。loadBookmarksとトリガーの間にアラートを挿入すると、すべてが正常に機能します。私がそれを取り出すならば、それはしません。なぜですか？

4

2 に答える 2

2

あなたの説明と常識に基づいて、それloadBookmarks()はajax呼び出しなどのリモートソースからデータをロードするように聞こえます。これは、データを受信する前trigger('loaded')に発砲できることを意味します。にコールバック引数を追加し、そこでイベントをトリガーできます。 loadBookmarks()loadBookmarks()

$('#bookmarks .thumbnails').loadBookmarks( getBookmarksUrl(1) , function() {
  $('#bookmarks').trigger('loaded');
});

ただし、これloadBookmarksには、データを受信して​​必要なHTMLを作成した後で、この関数を呼び出すことを知っておく必要があります。実際のコードを確認せずにこれを示すことはできませんloadBookmarks。

追加の提案：ハンドラーをこのようにバインドせず、代わりにイベント委任を使用してください：

$('#bookmarks').on('click', '.thumbnails a', function(e) {
  e.preventDefault(); // don't want the link to actually be followed, do we
  var url = getFriendBookmarksUrl($(this).attr('data-item'));
  if(url) { // in case it's clicked before the data attribute is set
    var $tbody = $('#bookmarks .bookmarks-table tbody');
    $tbody.empty();
    $tbody.loadFriendBookmarks(url);
  }
});

これは、セレクター'#bookmarks .thumbnails a'に一致するすべての要素が、を呼び出した後にドキュメントに追加された場合でも、このクリックハンドラーを呼び出すことを意味しますon。つまり、を呼び出す前でもこれらのイベントを委任できるloadBookmarksため、loadedイベントはまったく必要ありません。さらに、この方法では、ノードbindごとに関数の個別のコピーを作成したのとは対照的に、メモリ内にハンドラー関数のコピーが1つだけあります。a

于 2012-05-18T04:44:40.427 に答える
0

問題は、コード内の他の場所にあります。おそらくloadBookmarks*関数のjsエラーです。

見る：

http://jsfiddle.net/BBESV/

トリガーは完全に機能します

于 2012-05-18T02:26:51.980 に答える