stache 文件的 XML 解析错误，用于教程 (v2)答案

【问题标题】：XML Parsing Error for stache file, used in Tutorial (v2)stache 文件的 XML 解析错误，用于教程 (v2)
【发布时间】：2017-03-07 23:00:50
【问题描述】：

我目前声明通过v2 tutorial 学习 CanJS。

index.html 由以下几行组成

<!-- CanJS application root -->
<div id="can-main"></div>
<script src="libs/jquery-3.1.1.js"></script>
<script src="libs/can.jquery.dev.js"></script>
<script src="libs/can.map.define.js"></script>
<script src="libs/can.stache.js"></script>
<script src="libs/can.fixture.js"></script>
<script src="app.js"></script>
<script src="components/tut-form/base.js"></script>

app.js 没有什么特别之处。组件 JavaScript 文件 (base.js) 如下所示

can.Component.extend({
  tag: 'tutorial-form',
  template: can.view('components/tut-form/base.stache'),
  viewModel: {
    hello: 'Hello Input Component'
  }
});

我已将标签 <tutorial-form></tutorial-form> 添加为 index.html 的 <body> 的最后一行。

现在至少 FF 给出以下错误

XML 解析错误：文档元素后出现垃圾位置：file:///path/to/tutorial/components/tut-form/base.stache 第 2 行，第 1 列：

虽然这个文件看起来像这样

<h3>Hello</h3>
<h3>{{hello}}</h3>

好吧，我想，我只是缺少一个 CanJS 组件（我正在使用来自 CanJS .zip 的文件，因为 custom download page 已损坏或看起来根本不像教程中描述的那样），例如 can.Component 或 can.view。浏览器可以加载 .stache 文件，但我不确定幕后发生了什么。

有没有人暗示我在这里做错了什么？

【问题讨论】：

标签： canjs canjs-component

【解决方案1】：

静态文件服务器是我解决此问题的方法。不要将所有文件加载为 file://，这可能在 FF 中也不起作用（在 Chrome 中，您会收到 cross-origin requests not allowed for local files 之类的消息）。

我刚刚配置了一个 NGINX，以便为这个小项目提供文件，现在它可以完美运行了。

旁注： 在这种情况下，将 <tutorial-form/> 之类的自定义标签添加到 index.html 中不起作用。相反，您需要将此元素（一个 can.Component）附加到正文中，如下所示：

$( 'body' ).append( can.stache( '<tutorial-form />' )() );

【讨论】：