XML 教程 (v2) 中使用的缓存文件解析错误

Question

我目前表示要通过 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 Parsing Error: junk after document element Location: file:///path/to/tutorial/components/tut-form/base.stache Line Number 2, Column 1:

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

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

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

有人能告诉我我做错了什么吗？

Answer 1

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

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

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

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

XML 教程 (v2) 中使用的缓存文件解析错误

XML Parsing Error for stache file, used in Tutorial (v2)

canjs

canjs-component