1

我正在使用以下代码加载两个 underscore.js 模板。单击第一个链接后，将加载骨架模板。第一个触发器执行 find 绑定，它正确执行 loadBookmarks 函数，但“加载”触发器永远不会触发，并且 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为每个a节点创建一个单独的函数副本。

于 2012-05-18T04:44:40.427 回答
0

问题出在代码中的其他位置。可能是函数中的一些 js 错误loadBookmarks*。

看：

http://jsfiddle.net/BBESV/

触发器完美地工作

于 2012-05-18T02:26:51.980 回答