Question

我阅读了Underscore的文档，在_.template中找到：

在调试无法重现的错误时，预编译模板可能会有很大帮助。这是因为预编译模板可以提供行号和堆栈跟踪，这在客户端编译模板时是不可能的。源属性在编译的模板函数上可用，以便于预编译

我想知道这意味着什么以及它是如何使用的。

我写下面的代码：

<div>
  <ul class="list">
    <li>apple</li>
    <li>orange</li>
    <li class="last-item">peach</li>
  </ul>
</div>

<script src="underscore.js"></script>

<script type="text/template" id="tpl">
  <ul class="list">
    <%_.each(obj, function(e, i, a){%>
      <% if (i === a.length - 1) %>
        <li class="last-item"><%=e.name%></li>
      <% else %>
        <li><%=e.name%></li>
    <%})%>
  </ul>
</script>

<script>
var data = [{name: "apple"}, {name: "orange"}, {name: "peach"}];
var compiled = _.template(document.getElementById("tpl").innerHTML);
var str = compiled(data);
document.querySelector("div").innerHTML = str;
</script>

效果很好，在我看来，当我错过模板中的>时，通过预编译它会告诉我哪条线路我想念>，是吗？以及如何进行演示？以下代码如果直接放置可能不起作用，那么如何使其有用呢？

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>

Answer 1

JST是一个服务器端的东西，而不是客户端。这意味着您可以通过某些服务器端脚本在服务器端上编译Unserscore模板，并将结果保存在文件中。然后将此文件用作已编译的 Unserscore模板。

Answer 2

您不必拥抱尖括号。只需执行以下操作：

<script>
    const yourData = {};
    JST.project = _.template(jstText)(yourData);
</script>

这应该是技巧：）

任何人都可以在_.template中解释Underscore的预编译吗？

2 个答案: