Question

我正在尝试创建一个基本的应用程序，使用主干，下划线和Parse。

在我的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，因为它现在不应该使用网络服务器并且不断正常地执行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模板执行此操作。其他模板引擎也有相同的任务。

我可以从src中包含一个文本/模板脚本吗？

1 个答案:

为什么它不起作用

你能做什么