Ошибка синтаксического анализа 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 />' )() );
Другие вопросы по тегам