gpt4 book ai didi

javascript - 渲染模板时的 Backbone JS 触发事件

转载 作者:行者123 更新时间:2023-11-28 08:35:08 25 4
gpt4 key购买 nike

我正在使用 underscore.js 模板函数在我的 View 中渲染模板

<script type="text/html" id="friends-svg">
<%% if (this.model.get("returning_user")) { %>
<svg></svg>
<%% } else { %>
<div id="message-container">
<h3>You are a new User. Please wait while your Facebook Data is Loaded</h3>
<div id="progressbar"></div>
</div>
<%% } %>
</script>

例如,如果用户不是回访用户,上面的代码将渲染一个 div,我将使用 jquery 来创建进度条,如果用户是回访用户,我将渲染一个 svg 元素,我将使用 D3 来定位该元素.

问题是我相信创建进度条或制作 D3 图表的函数是在模板中的 html 附加到 DOM 之前调用的。例如,当获取集合时,我的plotData函数被调用

this.listenTo(this.collection, "reset", this.plotData);

我已经考虑过在哪里调用该函数

this.createProgressbar()

但本质上我认为我需要以某种方式创建一个自定义事件监听器,以便在 svg 或 #progressbar div 等某些元素附加到 DOM 时。是否可以为这些元素附加到 DOM 时创建自定义事件?

最佳答案

您可能对 waitForKeyElements.js 感兴趣由布罗克A撰写。尽管他是为用户脚本编写的,但它可能会有所帮助。它监听元素,当它被添加到 DOM 时,它会运行该函数。这就是您所要求的,但我认为这不是获得您想要的东西的最佳方式。我个人只会在元素放入 DOM 后调用您放入 waitForKeyElements 中的函数。在用户脚本中,您不能执行此操作,因为您不能在页面执行的任何位置插入函数。这就是为什么它是为用户脚本而不仅仅是任何脚本创建的。

所以如果你使用 waitForKeyElements 你会得到这样的结果:

waitForKeyElements ("svg", function(){doStuffToSVG});
waitForKeyElements ("#progressbar", function(){doStuffToProgressbar});

因此,当您运行在页面上插入任何元素的代码时,它将调用该函数。这与执行以下操作几乎相同:

<head><script src="js/progressBarFileToLoad.js"></script></head>
<body>
...
<svg></svg>
<script type="text/javascript">doStuffToProgressbar;</script>
...
</body>

但是 waitForKeyElements 方法有一个每 300 毫秒运行一次的间隔 (setInterval),后一个示例完全可以避免这一点。更不用说当您意识到不再需要其他间隔以及您需要做的所有其他事情时,需要清除其他间隔的额外工作。

如果您的代码在元素添加到页面之前运行,则在元素添加到页面之后将其放入 html 中。如果由于某种原因,您无法更改将元素添加到页面的时间,并且无法更改添加到页面的所有内容,那么我想在添加元素时进行监听。

此外,如果您决定使用 waitForKeyElements,请务必阅读该文件中的注释。它展示了如何改变间隔时间和iFrame来搜索元素,这可以大大提高性能。

关于javascript - 渲染模板时的 Backbone JS 触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21323740/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com