Ошибка синтаксического анализа XML для stache-файла, используемого в руководстве (v2)
В настоящее время я заявляю, что изучаю CanJS с помощью учебника v2.
Файл 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>
как последняя строка в <body>
из index.html.
Теперь как минимум FF выдает следующую ошибку
Ошибка синтаксического анализа XML: нежелательная почта после элемента документа. Расположение: файл:///path/to/tutorial/components/tut-form/base.stache Строка № 2, столбец 1:
пока этот файл выглядит так
<h3>Hello</h3>
<h3>{{hello}}</h3>
Ну, я предполагаю, что мне просто не хватает компонента CanJS (я использую файлы из .zip CanJS, потому что пользовательская страница загрузки не работает или не выглядит так, как описано в руководстве), can.Component
или же can.view
, Браузер может загрузить файл.stache, но я не уверен, что происходит за кулисами.
У кого-нибудь есть подсказка, что я здесь делаю неправильно?
1 ответ
Моим решением этой проблемы был статический файловый сервер. Не загружайте все файлы как file://
Возможно, это не работает и в FF (в Chrome вы получаете запросы из разных источников, не разрешенные для локальных файловоподобных сообщений).
Я только что настроил NGINX, чтобы обслуживать файлы для этого небольшого проекта, теперь он работает отлично.
Sidenote: добавление пользовательского тега, например <tutorial-form/>
в index.html не работает в этом случае. Вместо этого вам нужно добавить этот элемент (can.Component) в тело следующим образом:
$( 'body' ).append( can.stache( '<tutorial-form />' )() );