Backbone.js 没有在正确的时间执行 document.write？答案

【问题标题】：Backbone.js not performing document.write at the correct time?Backbone.js 没有在正确的时间执行 document.write？
【发布时间】：2013-06-17 16:28:35
【问题描述】：

我有一个骨干.js CMS，它接受 html，然后在浏览器中呈现它。以下是呈现主干页面对象的模板文件（在 .hamlc 中）。

%h1.text= @page.get('title')
.text.page-content!= @page.get('content')

这工作正常，直到我有一个<script> 标签。我有一个小部件的脚本标签（如下）

<script src='http://www.opentable.com/frontdoor/default.aspx?rid=52900&restref=52900&bgcolor=8AA86B&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=http://www.opentable.com/frontdoor/img/ot_btn_black.png&otlink=FFFFFF&icon=light&mode=short&hover=1'></script>

这个小部件使用document.write（如果你是look at the source，你可以看到）。首先，当我加载页面时它不显示任何内容（我已经在一个 html 文件中单独测试了这个小部件，它显示了它们正常的 God-awful ）。当我检查元素时，看起来脚本标签已被删除。

但是，当我使用以下内容进行测试时：

<script type="text/javascript">
    alert(0);
</script>

它运行。但检查器中仍然没有任何内容。

最后，测试如下：

<script type="text/javascript">
    document.write('test');
</script>

它也运行。但是，它完全破坏了页面内容，只显示“测试”。

根据this article about using document.write for widgets，它说它在页面加载后无法运行。我假设这里发生的事情是 document.write 在页面加载后运行并销毁所有内容，因为这是骨干.js 使用的技术（一旦加载页面，在 DOM 中添加/替换元素）。

如何使我的 Backbone.js CMS 接受带有 document.write 小部件的脚本标签，而不显示任何内容或破坏整个页面？

【问题讨论】：

你能再扩展一下这个问题吗？根据您提供的示例代码，尚不清楚 Backbone.js 在哪里/如何适合这个等式。能否提供更多支持代码示例？
我没有提供更多代码示例（让我知道是否还有其他帮助），但在没有所有更新废话的情况下重新询问。希望它更清楚一点。

标签： backbone.js widget document.write hamlc

【解决方案1】：

我无法重现它，模板按原样呈现：

$ coffee
coffee> hc = require './src/hamlc'
{ compile: [Function],
  template: [Function],
  __express: [Function] }
coffee> template = hc.compile ".text.page-content!= @content"
[Function]
coffee> template(content: 'Hello <script>Script</script>')
'<div class=\'page-content text\'>Hello <script>Script</script></div>'

并且脚本标签被持久化。是否安装了最新版本？

【讨论】：

我使用的是haml_coffee_assets 1.12.0
如果我将 cmets 放在它周围，它就会持续存在。如果我不这样做，当我检查 chrome 中的元素时，它不存在......此外，如果我使用“=”而不是“！=”，它会留下脚本标签。不确定这是否是骨干？

【解决方案2】：

您在页面加载后调用 document.write，因此它将覆盖整个页面。您可以尝试将脚本标签放在 iframe 中，或者猴子补丁 document.write 以在页面加载后表现不同。请参阅此问题的最佳答案：

Dynamically added JavaScript overwrite the html page view (not the code)

【讨论】：

【解决方案3】：

如果我理解正确，您是在尝试将小部件的脚本标签包含在模板中，这意味着它是在初始 DOM 准备好后插入的。由于您提到的原因，这不起作用；当脚本执行时，它将替换 DOM 中的所有内容。

您需要在初始 DOM 完成之前加载脚本，即在 head> 或 body> 的开头。这反过来意味着您必须在服务器交付的初始 HTML 中包含脚本标记，而不是尝试在客户端动态生成它。

【讨论】：

对，但是 Backbone.js 不是不可能吗？这是一个客户端框架。
脚本标签只是成为服务器交付的初始 HTML 有效负载的一部分，与调用应用程序脚本的有效负载相同。