0

我目前说要通过v2 教程来学习 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'
  }
});

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

现在至少 FF 给出以下错误

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

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

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

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

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

4

1 回答 1

0

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

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

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

$( 'body' ).append( can.stache( '<tutorial-form />' )() );
于 2017-03-07T15:00:50.683 回答