javascript - 我可以包含来自 src 的文本/模板脚本吗？

Question

我试图使用主干、下划线和解析来创建一个基本应用程序。

在我的index.html中，我尝试包含一些像这样的脚本:

<script data-main="js/main" src="../bower_components/requirejs/require.js"></script>
<script type="text/template" id="login-template" src="js/templates/login.js">

当我尝试在主干部分执行以下操作时，它不起作用。

template: _.template($('#login-template').html());
// ...
render: function() {
    this.$el.html(this.template());
}

但是，当我更改脚本并将其直接添加到 html 文档中时，效果很好。

<script type="text/template" id="login-template">
  <header id="header"></header>
  <div class="login">
    <form class="login-form">
      <h2>Log In</h2>
      <div class="error" style="display:none"></div>
      <input type="text" id="login-username" placeholder="Username" />
      <input type="password" id="login-password" placeholder="Password" />
      <button>Log In</button>
    </form>
</script>

这是为什么呢？有没有办法将外部源的模板包含在 <script> 中标签？

(在这种情况下，我无法使用 $.get，因为它现在不应该使用 Web 服务器，并且正常情况下会不断出现 XHR 错误。)

Answer 1

为什么不起作用

<script>标签的src属性将导致浏览器向 login.js 发出 HTTP 请求。但是，它不会将响应插入到 DOM 中。您需要做到这一点才能让您的代码正常工作。

浏览器不会这样做，原因很简单:HTML5 spec并没有说他们应该这样做。

特别是scripting spec有 actions that user agents must take when preparing a <script> tag 的列表并执行其源代码。这些列表不会指示浏览器将脚本的源代码插入到 DOM 中。内联方法之所以有效，是因为脚本源已经在 DOM 中。

您可以通过检查任何 <script> 来查看此行为带有 src 的标签属性 - 加载、解析并执行其源代码后，它将不包含子节点。

你可以做什么

您可以使用 AJAX 请求加载模板，但不建议这样做 - 如果您的应用程序有少量模板，那么将它们包含在主 HTML 文件中会更简单；如果它有多个，您将需要大量的服务器往返才能获取它们。

最好的解决方案通常是一个构建步骤，将模板编译成 JavaScript 文件中的单个对象，可以像任何其他脚本一样包含该对象。

通过这样的步骤，将模板编译到名为 AppTemplates 的变量中，您的代码将类似于:

template: AppTemplates['templates/login.tpl']

Grunt有一个名为 grunt-contrib-jst 的任务这对 Underscore.js 模板执行此操作。其他模板引擎也有等效的任务。