Учебники

RIOT.JS — Метки

Июль 19, 2018

RIOT работает, создавая собственные, повторно используемые теги HTML. Эти теги похожи на веб-компоненты и могут многократно использоваться на страницах и в веб-приложениях. Когда вы включаете инфраструктуру RIOT в свою HTML-страницу, импортированный js создает переменную riot, указывающую на объект riot. Этот объект содержит функции, необходимые для взаимодействия с RIOT.js, такие как создание и монтирование тегов.

Мы можем создавать и использовать теги двумя способами.

  • Встроенный HTML — путем вызова функции riot.tag (). Эта функция берет имя тега и определение тега, чтобы создать тег. Определение тега может содержать HTML, JavaScript, CSS и т. Д.

  • Отдельный файл тега — сохраняя определение тега в файле тега. Этот файл тегов содержит определение тега для создания тега. Этот файл необходимо импортировать вместо вызова riot.tag ().

Встроенный HTML — путем вызова функции riot.tag (). Эта функция берет имя тега и определение тега, чтобы создать тег. Определение тега может содержать HTML, JavaScript, CSS и т. Д.

Отдельный файл тега — сохраняя определение тега в файле тега. Этот файл тегов содержит определение тега для создания тега. Этот файл необходимо импортировать вместо вызова riot.tag (). 

<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<

Ниже приведен пример встроенного тега.

пример 

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Это даст следующий результат —

Ниже приведен пример внешнего тега файла.

пример

messageTag.tag 

<messageTag>
   <h1>Hello World!</h1>
</messageTag>

index.htm 

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script src = "messageTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("messageTag");
      </script>
   </body>
</html>

Это даст следующий результат —

44
Share: