Блог

Главная - Вопросы по программированию - Как добавить (смонтировать) 2 riot.js компонент на HTML-странице

Как добавить (смонтировать) 2 riot.js компонент на HTML-странице

#riot.js #riot

#riot.js #беспорядки

Вопрос:

Когда я добавляю (монтирую) 2 компонента на HTML-странице, я получаю ошибку «Uncaught TypeError: не удается прочитать свойство ‘class’ неопределенного значения при монтировании $ 1»

 <body>
<script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot compiler.js"> 
</script>
<script type="riot/tag">
<dict2-app>dict2-app</dict2-app>
</script>
<dict2-app></dict2-app>
<script>
riot.mount('dict2-app')
</script>
<script type="riot/tag">
<dict3-app>dict3-app</dict3-app>
</script>
<dict3-app></dict3-app>
<script>
riot.mount('dict3-app')
</script>
</body>

Код работает должным образом, когда я комментирую один из //riot.mount(‘dict{X}-app’)

Ответ №1:

Вам не нужно вызывать несколько riot.mount, вам нужен только один, как показано ниже:

 riot.mount('*')

Ваш код будет:

 <body>
    <script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot compiler.js"> 
    </script>
    <dict2-app>dict2-app</dict2-app>
    <dict2-app></dict2-app>
    <dict3-app>dict3-app</dict3-app>
    <dict3-app></dict3-app>
    <script>
        riot.mount('*')
    </script>
</body>

Ответ №2:

Uncaught TypeError: Cannot read property 'class' of undefined at mount$1 это бесполезное сообщение об ошибке, означающее «riot не знает о компоненте с таким именем». Убедитесь, что вы включили оба шаблона. Добавьте console.log файлы в каждый файл и прочитайте скомпилированные исходные файлы. Если журналы не отображаются или появляются после ошибки, это ваша проблема.

И самое худшее, с чем я борюсь, это то, что вы каким-то образом включаете riot дважды. В основном первая копия получает зарегистрированные в ней теги, а вторая копия отменяет их регистрацию (или, точнее, заменяет window .бунт с копией, которая не знает ваших тегов).

Редактировать:

Я попробовал ваш пример кода и получил ту же ошибку. Он работает с другим ответом ( riot.mount('*') ), а также отлично работает с:

   <script>
    riot.mount('dict2-app')
    riot.mount('dict3-app')
  </script>

Это также работает с размещением всех тегов скрипта в конце.

 <body>
  <script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot compiler.js">
  </script>
  <script type="riot/tag">
    <dict2-app>dict2-app</dict2-app>
  </script>
  <dict2-app></dict2-app>
  <script type="riot/tag">
    <dict3-app>dict3-app</dict3-app>
  </script>
  <dict3-app></dict3-app>
  <script>
    riot.mount('dict2-app')
  </script>
  <script>
    riot.mount('dict3-app')
  </script>
</body>

Понятия не имею, почему это проблема.