【问题标题】:Convert "DOM Waiter" to namespacing listener?将“DOM Waiter”转换为命名空间监听器?
【发布时间】:2018-08-21 16:13:03
【问题描述】:

因此,我在 SharePoint 网站上安装了一个设计框架,用于动态插入文件列表,用户无需执行任何操作或单击任何按钮即可加载列表。但是,结果中的日期没有被格式化。

与此同时,我在另一个用户的帮助下提出了以下解决方案,该用户检查 DOM 直到它们被加载,然后执行使用 MomentJS 重新格式化日期值的操作:

var timeout = null;
function waitForDom () {
  console.log("Checking DOM...");
  // check for the elements you expect to exist
  if ($(".shortpoint-listitem-subtitle").length) {
    $(".shortpoint-tab-title").click(function() {waitForDom();});
    clearTimeout(timeout);
    formatDates();
  }
  else {
    // adjust timeout time to whatever feels appropriate to you
    timeout = setTimeout(waitForDom, 500);
  }
}

waitForDom();

function formatDates() {
  $('.shortpoint-listitem-subtitle, .shortpoint-listitem-description').each(function() {
    var currentElement = $(this);
    var value=currentElement.text();
    var dateParseRegex = /\d\d\d\d[-]\d\d[-]\d\d[T]\d\d[:]\d\d:\d\d[.]\d{7}[Z]/g;
    var formattedDate = value.replace(dateParseRegex, function (match) {
      return moment(match).format("MMMM Do YYYY, h:mm:ss a");
    });
    currentElement.text(formattedDate);  
  });
}

setTimeout(function () {
  var content = '';
  $(".content").append(content);
}, 2300);

它可以工作,但不是超级高性能。我联系了该公司并询问我如何才能连接到更同步的东西,他们的建议是“听像 shortpoint-init[ShortPoint Name] 这样的 jQuery 事件”。所以就我而言,事件是shortpoint-initfiles-list

但是,在查看 jQuery 事件示例后,我不知道如何设置它,以便 jQuery “侦听”这些“事件”以在文档/页面上发生,以便它以时尚的方式运行代码这比等待 DOM 更流畅。大多数事件似乎是响应式的,也就是说,它们等待用户的输入,例如点击。

我想我正在寻找namespacing events,但仍然不知道如何将这段代码重新加工成那个。

我没有将此代码放在document readydocument load 和其他类似代码中的原因是数据是异步加载的,因此即使文档/正文已准备好,数据/DOM 也不存在。

这不应附加到任何类型的点击事件/动作。

【问题讨论】:

    标签: javascript jquery events namespaces listener


    【解决方案1】:

    您不是在寻找命名空间的事件。你只想在document 上挂钩事件:

    $(document).on("shortpoint-initfiles-list", function(e) {
        // Here, `e.target` will be the element the event was fired on
    });
    

    我假设这些事件是冒泡的。我试图在 their knowledgebase 上查找它,但似乎没有像 API 参考那样愚蠢的东西(或者他们很好地隐藏了它)。

    【讨论】:

    • 所以我只是将我的 formatDates 代码放入该函数的主体中?
    • @ChristopherBruce:假设只有一个列表,是的。否则你需要使用e.target 来确定事件来自哪个列表,我猜。
    • 好吧,很酷,这行得通。我这里确实有另一个有趣的问题,其他选项卡在您单击它们之前没有任何数据,此时 div 中的内容会发生变化。但是,日期没有被格式化,但是如果我单击页面上某处的另一个元素,日期格式就会更新。有没有好的解决方案?我意识到这个内容的设置非常笨拙。如果需要,我可以更新我的问题以进一步澄清。
    • 不知道,您可能需要向公司开一张票,询问有关这些事件的详细信息、何时以及如何提出等等。
    • 啊,我认为我使用了错误的事件处理程序,并且我在代码中的错误位置进行了尝试,我最终在您的代码之后使用了它,现在一切正常。 $(document).on("click", ".shortpoint-tab-title", function () { formatDates(); });再次感谢。
    猜你喜欢
    • 2011-02-28
    • 1970-01-01
    • 2015-08-19
    • 2013-04-01
    • 2013-04-14
    • 2011-09-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多