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解析错误：文档元素之后的垃圾位置：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文件，但我不确定幕后会发生什么。

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

Answer 1

静态文件服务器是我解决此问题的方法。不要将所有文件加载为file://，这可能也不适用于FF（在Chrome中，您会收到跨域请求，不允许使用本地文件 - 类似的消息）。

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

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

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

stache文件的XML解析错误，在教程（v2）

1 个答案: