如何让 Caja 在脚本标签中保留模板文本？答案

【问题标题】：How do I make Caja preserve template text inside a script tag?如何让 Caja 在脚本标签中保留模板文本？
【发布时间】：2014-04-18 00:08:23
【问题描述】：

我想看看是否可以使用ICanHaz 或Handlebars 来构建我的Google Docs Add-on 的侧边栏。然而，事实证明 Caja 正在从我的脚本标签中剥离实际的 HTML。有什么办法可以防止这种情况发生吗？

假设我的 Handlebars 模板是这样的：

<script id="user" type="text/x-handlebars-template">
  <li>
    <p class="name">Hello I'm {{ name }}</p>
  </li>
</script>

那么目前，在运行时是这样的：

<script id="user-caja-guest-0___" data-caja-type="text/x-handlebars-template"></script>

所以，即使我可以使用$('#user").html() 查找它，它也只会给我一个空模板。有没有办法阻止 Caja 这样做？

【问题讨论】：

标签： google-apps-script handlebars.js google-caja icanhaz.js

【解决方案1】：

Caja 目前不支持在任何情况下保留 <script> 元素的内容，并且还假定所有脚本文本都是 JavaScript。这将是可能的，但支持起来并不简单。如果您需要此功能，请file a request for it。

【讨论】：

【解决方案2】：

这似乎适用于带有 Caja 的 Handlebars.js。

模板标记（无脚本标签 + 隐藏 div）

<div id="entry-template" class="header" style="display: none">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
</div>

然后是你的脚本

var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
alert(template(context));

我们得到

<h1>My New Post</h1>
<div class="body">
  This is my first post!
</div>

【讨论】：