Учебники

RIOT.JS — Первое применение

Июль 19, 2018

RIOT работает, создавая собственные, повторно используемые теги HTML. Эти теги похожи на веб-компоненты и могут многократно использоваться на страницах и в веб-приложениях.

Шаги для использования RIOT

  • Импортируйте riot.js на html-страницу.

Импортируйте riot.js на html-страницу. 

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

  • Запустите раздел скрипта и определите содержимое тега как HTML. Также может быть включен скрипт, который мы увидим позже в руководстве.

Запустите раздел скрипта и определите содержимое тега как HTML. Также может быть включен скрипт, который мы увидим позже в руководстве. 

var tagHtml = "<h1>Hello World!</h1>";

  • Определите тег, используя метод riot.tag (). Передайте ему имя тега, messageTag и переменную, содержащую содержимое тега.

Определите тег, используя метод riot.tag (). Передайте ему имя тега, messageTag и переменную, содержащую содержимое тега. 

riot.tag("messageTag", tagHtml);

  • Смонтируйте тег, используя метод riot.mount (). Передайте ему имя тега, messageTag. Процесс монтирования монтирует messageTag во всех его вхождениях на html-странице. Тег MessageTag должен быть определен с помощью riot.js перед монтированием.

Смонтируйте тег, используя метод riot.mount (). Передайте ему имя тега, messageTag. Процесс монтирования монтирует messageTag во всех его вхождениях на html-странице. Тег MessageTag должен быть определен с помощью riot.js перед монтированием. 

riot.mount("messageTag");
</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>

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

46
Share: