Question

我正在使用underscore.js模板函数在我的视图中呈现模板

<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>

例如，如果用户不是返回用户，上面的代码将呈现我将使用jquery创建进度条的div，并且如果用户是返回用户，将呈现svg元素，我将使用D3进行目标

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

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

我玩过哪里调用函数

this.createProgressbar()

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

Answer 1

您可能对BrockA撰写的waitForKeyElements.js感兴趣。虽然他已经为用户编写了它，但它可能会有所帮助。它侦听元素，当它被添加到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方式的间隔（setInterval）每300毫秒运行一次，后一个例子完全可以避免。更不用说当你意识到它不再需要以及你将需要做的所有其他事情时，清除其他间隔的额外工作。

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

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

渲染模板后的Backbone JS fire事件

1 个答案: