javascript 我可以包含来自 src 的文本/模板脚本吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25222311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
can I include a text/template script from a src?
提问by corvid
I was trying to create a basic app, using backbone, underscore, and Parse.
我试图创建一个基本的应用程序，使用主干、下划线和解析。
In my index.html, I tried including some scripts like this:
在我的 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">
When I tried to do the following on my backbone part, it did not work.
当我尝试在我的主干部分执行以下操作时，它不起作用。
template: _.template($('#login-template').html());
// ...
render: function() {
this.$el.html(this.template());
}
However, when I changed my script, and added it directly in the html document, it worked fine.
但是，当我更改脚本并将其直接添加到 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>
why is this? Is there any way to include templates from an external source in a <script>tag?
为什么是这样？有没有办法在<script>标签中包含来自外部源的模板？
(I cannot use $.getfor this case, as it's not supposed to use web server right now and keep getting XHR errors doing it normally.)
（我不能$.get在这种情况下使用，因为它现在不应该使用 Web 服务器并且在正常执行时不断收到 XHR 错误。）
回答by joews
Why it doesn't work
为什么它不起作用
The <script>tag's srcattribute will cause the browser to make a HTTP request for login.js. It won't, however, insert the response into the DOM. You'd need that to happen for your code to work.
该<script>标签的src属性会导致浏览器做了一个HTTP请求login.js。但是，它不会将响应插入到 DOM 中。您需要这样做才能使您的代码正常工作。
Browsers don't do this for the simple reason that the HTML5 specdoesn't say that they should.
浏览器不这样做的原因很简单，HTML5 规范没有说他们应该这样做。
In particular, the scripting spechas lists of the actions that user agents must take when preparing a <script>tagand executing its source. These lists don't instruct browsers to insert the script's source into the DOM. The inline approach works because the script source is already in the DOM.
特别是，脚本规范列出了用户代理在准备<script>标签和执行其源代码时必须采取的操作。这些列表不会指示浏览器将脚本的源代码插入到 DOM 中。内联方法有效，因为脚本源已经在 DOM 中。
You can see this behaviour by inspecting any <script>tag with a srcattribute - after loading, parsing and executing its source, it will contain no child nodes.
您可以通过检查<script>具有src属性的任何标记来查看此行为- 在加载、解析和执行其源之后，它将不包含子节点。
What you could do
你能做什么
You canload templates using AJAX requests, but it's not recommended - if your application has a small number of templates it's simpler to just include them in your main HTML file; if it has several you'd need a lot of server round trips to fetch them.
您可以使用 AJAX 请求加载模板，但不建议这样做 - 如果您的应用程序有少量模板，将它们包含在主 HTML 文件中会更简单；如果它有几个，你需要大量的服务器往返来获取它们。
The best solution is usually a build step that compiles your templates into a single Object in a JavaScript file, which can be included like any other script.
最好的解决方案通常是一个构建步骤，将您的模板编译成 JavaScript 文件中的单个对象，该对象可以像任何其他脚本一样被包含在内。
With a step like this that compiles your templates into a variable called AppTemplates, your code would look something like:
使用这样的步骤将您的模板编译成一个名为 的变量AppTemplates，您的代码将如下所示：
template: AppTemplates['templates/login.tpl']
Grunthas a task called grunt-contrib-jstthat does this for Underscore.js templates. There are equivalent tasks for other template engines.
Grunt有一个名为grunt-contrib-jst的任务，它为 Underscore.js 模板执行此操作。其他模板引擎也有相同的任务。
