RIOT.JS - Теги

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

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

Inline HTML- Вызов функции riot.tag (). Эта функция принимает имя тега и определение тега для создания тега. Определение тега может содержать HTML, JavaScript, CSS и т. Д.
Seperate Tag file- Сохраняя определение тега в файле тегов. Этот файл тегов содержит определение тега для создания тега. Этот файл необходимо импортировать вместо вызова 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>

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