Учебники

RIOT.JS — Краткое руководство

Июль 19, 2018

RIOT.JS — Обзор

RIOT.js — это библиотека пользовательского интерфейса очень небольшого размера / легкого веб-компонента для разработки веб-приложений. Он сочетает в себе преимущества React.JS и Polymer с очень лаконичной реализацией и простыми конструкциями для изучения и использования. Минимизированная версия имеет размер около 10 КБ.

Ниже приведены ключевые особенности RIOT.js.

Привязки выражений

  • Очень маленькая полезная нагрузка при обновлениях и перекомпоновках DOM.

  • Изменения распространяются вниз от родительских тегов к дочерним тегам / элементам управления.

  • Использует предварительно скомпилированные выражения и кэширует их для высокой производительности.

  • Обеспечивает хорошее управление событиями жизненного цикла.

Очень маленькая полезная нагрузка при обновлениях и перекомпоновках DOM.

Изменения распространяются вниз от родительских тегов к дочерним тегам / элементам управления.

Использует предварительно скомпилированные выражения и кэширует их для высокой производительности.

Обеспечивает хорошее управление событиями жизненного цикла.

Следует стандартам

  • Нет проприетарной системы событий

  • Нет зависимости от каких-либо библиотек polyfill.

  • Никаких дополнительных атрибутов не добавлено в существующий HTML.

  • Хорошо интегрируется с JQuery.

Нет проприетарной системы событий

Нет зависимости от каких-либо библиотек polyfill.

Никаких дополнительных атрибутов не добавлено в существующий HTML.

Хорошо интегрируется с JQuery.

Главные ценности

RIOT.js разработан с учетом следующих значений.

  • Простой и минималистичный.

  • Легко учиться и внедрять.

  • Предоставить реактивные представления для создания пользовательских интерфейсов.

  • Предоставьте библиотеку событий для создания API с независимыми модулями.

  • Заботиться о поведении приложения кнопкой браузера назад.

Простой и минималистичный.

Легко учиться и внедрять.

Предоставить реактивные представления для создания пользовательских интерфейсов.

Предоставьте библиотеку событий для создания API с независимыми модулями.

Заботиться о поведении приложения кнопкой браузера назад.

RIOT.JS — Настройка среды

Есть два способа использовать RIOT JS.

  • Локальная установка — вы можете загрузить библиотеку RIOT на свой локальный компьютер и включить ее в свой HTML-код.

  • Версия на основе CDN. Вы можете включить библиотеку RIOT в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка — вы можете загрузить библиотеку RIOT на свой локальный компьютер и включить ее в свой HTML-код.

Версия на основе CDN. Вы можете включить библиотеку RIOT в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка

  • Перейдите на https://riot.js.org/download/, чтобы загрузить последнюю доступную версию.

  • Теперь поместите загруженный файл riot.min.js в каталог вашего сайта, например, / riotjs.

Перейдите на https://riot.js.org/download/, чтобы загрузить последнюю доступную версию.

Теперь поместите загруженный файл riot.min.js в каталог вашего сайта, например, / riotjs.

пример

Теперь вы можете включить библиотеку riotjs в ваш HTML-файл следующим образом: 

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <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>

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

CDN основанная версия

Вы можете включить библиотеку RIOT js в свой HTML-код непосредственно из сети доставки контента (CDN). Google и Microsoft обеспечивают доставку контента для последней версии.

Примечание. В этом руководстве мы используем версию библиотеки CDNJS.

пример

Теперь давайте перепишем приведенный выше пример, используя библиотеку jQuery из CDNJS. 

<!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>

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

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

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>

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

RIOT.JS — Метки

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>

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

RIOT.JS — Выражения

RIOT js использует {} для определения выражений. RIOT JS позволяет следующие типы выражений.

  • Простое выражение — определение переменной и использование внутри тега.

Простое выражение — определение переменной и использование внутри тега. 

<customTag>
   <h1>{title}</h1>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
   </script>
</customTag>

  • Оценивать выражение — оценивать переменную при использовании в операции.

Оценивать выражение — оценивать переменную при использовании в операции. 

<customTag>
   <h2>{val * 5}</h2>
   <script>
      this.val = 4;
   </script>
</customTag>

  • Получить значение из объекта параметров — чтобы получить значение, переданное тегу через атрибуты.

Получить значение из объекта параметров — чтобы получить значение, переданное тегу через атрибуты.

пример

Ниже приведен полный пример вышеуказанных концепций.

customTag.tag 

<customTag>
   <h1>{title}</h1>
   <h2>{val * 5}</h2>
   <h2>{opts.color}</h2>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.val = 4;
   </script>
</customTag>

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>
      <customTag color="red"></customTag>
      <script src = "customTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("customTag");
      </script>
   </body>
</html>

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

RIOT.JS — Стайлинг

Теги RIOT js могут иметь свой собственный стиль, и мы можем определять стили внутри тегов, которые будут влиять только на содержимое внутри тега. Мы также можем установить класс стиля, используя скрипты внутри тега. Ниже приводится синтаксис, как добиться стилизации тегов RIOT.

custom1Tag.tag 

<custom1Tag>
   <h1>{title}</h1>
   <h2 class = "subTitleClass">{subTitle}</h2>
   <style>
   h1 {
      color: red;
   }
   .subHeader {
      color: green;
   }
   </style>
   <script>
      this.title = "Welcome to TutorialsPoint.COM";
      this.subTitle = "Learning RIOT JS";
      this.subTitleClass = "subHeader";
   </script>
</custom1Tag>

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>
      <h1>Non RIOT Heading</h1>
      <custom1Tag></custom1Tag>
      <script src = "custom1Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom1Tag");
      </script>
   </body>
</html>

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

RIOT.JS — Условно

Условные обозначения — это конструкции, которые используются для отображения / скрытия элементов тегов RIOT. Ниже приведены три условных опоры RIOT —

  • if — добавить / удалить элемент на основе переданного значения.

if — добавить / удалить элемент на основе переданного значения. 

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

  • show — показывает элемент, используя style = » display: » «, если передан true.

show — показывает элемент, используя style = » display: » «, если передан true. 

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

  • hide — скрывает элемент, используя style = » display: ‘none’ «, если передано значение true.

hide — скрывает элемент, используя style = » display: ‘none’ «, если передано значение true. 

<custom2Tag>
   <h2 show = {showMessage}>Using show!</h2>
   <script>
      this.showMessage = true;      
   </script>
</custom2Tag>

пример

Ниже приведен полный пример.

custom2Tag.tag 

<custom2Tag>
   <h2 if = {showMessage}>Using if!</h2>
   <h2 if = {show}>Welcome!</h1>
   <h2 show = {showMessage}>Using show!</h2>
   <h2 hide = {show}>Using hide!</h2>
   <script>
      this.showMessage = true;
      this.show = false; 
   </script>
</custom2Tag>

custom2.htm 

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

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

RIOT.JS — Доходность

Выход — это механизм для помещения внешнего html-содержимого в тег RIOT. Есть несколько способов сделать выход.

  • Простой выход — если мы хотим заменить один заполнитель в теге. Тогда используйте этот механизм.

Простой выход — если мы хотим заменить один заполнитель в теге. Тогда используйте этот механизм. 

<custom3Tag>
   Hello <yield/>
</custom3Tag>
<custom3Tag><b>User</b></custom3Tag>

  • Multiple Yield — если мы хотим заменить несколько заполнителей в теге. Тогда используйте этот механизм.

Multiple Yield — если мы хотим заменить несколько заполнителей в теге. Тогда используйте этот механизм. 

<custom4Tag>
   <br/><br/>
   Hello
   <yield from = "first"/>
   <br/><br/>
   Hello 
   <yield from = "second"/>
</custom4Tag>
<custom4Tag>
   <yield to = "first">User 1</yield>
   <yield to = "second">User 2</yield>
</custom4Tag>

пример

Ниже приведен полный пример.

custom3Tag.tag 

<custom3Tag>
   Hello <yield/>
</custom3Tag>

custom4Tag.tag 

<custom4Tag>
   <br/><br/>
   Hello
   <yield from = "first"/>
   <br/><br/>
   Hello 
   <yield from = "second"/>
</custom4Tag>

custom3.htm 

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom3Tag><b>User</b></custom3Tag>
      <custom4Tag>
         <yield to = "first">User 1</yield>
         <yield to = "second">User 2</yield>
      </custom4Tag>   
      <script src = "custom3Tag.tag" type = "riot/tag"></script>
      <script src = "custom4Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom3Tag");
         riot.mount("custom4Tag");
      </script>
   </body>
</html>

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

RIOT.JS — Обработка событий

Мы можем прикрепить событие к элементам HTML аналогично тому, как мы получаем доступ к элементам HTML с помощью объекта refs. В качестве первого шага мы добавляем атрибут ref к элементу DOM и получаем к нему доступ, используя this.ref в блоке сценария тега.

  • Присоединить ref — добавить атрибут ref к элементу DOM.

Присоединить ref — добавить атрибут ref к элементу DOM. 

<button ref = "clickButton">Click Me!</button>

  • Используйте объект refs — теперь используйте объект refs в событии монтирования. Это событие вызывается, когда RIOT монтирует пользовательский тег и заполняет объект refs.

Используйте объект refs — теперь используйте объект refs в событии монтирования. Это событие вызывается, когда RIOT монтирует пользовательский тег и заполняет объект refs. 

this.on("mount", function() {
   console.log("Mounting");
   console.log(this.refs.username.value);
})

пример

Ниже приведен полный пример.

custom5Tag.tag 

<custom5Tag>
   <form>
      <input ref = "username" type = "text" value = "Mahesh"/>
      <input type = "submit" value = "Click Me!" />
   </form>
   <script>
      this.on("mount", function() {
         console.log("Mounting");
         console.log(this.refs.username.value); 
      })
   </script>
</custom5Tag>

custom5.htm 

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

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

RIOT.JS — Доступ к DOM

Мы можем получить доступ к элементам HTML, используя объект refs. В качестве первого шага мы добавляем атрибут ref к элементу DOM и получаем к нему доступ, используя this.ref в блоке сценария тега.

  • Присоединить ref — добавить атрибут ref к элементу DOM.

Присоединить ref — добавить атрибут ref к элементу DOM. 

<button ref = "clickButton">Click Me!</button>

  • Используйте объект refs — теперь используйте объект refs в событии монтирования. Это событие вызывается, когда RIOT монтирует пользовательский тег и заполняет объект refs.

Используйте объект refs — теперь используйте объект refs в событии монтирования. Это событие вызывается, когда RIOT монтирует пользовательский тег и заполняет объект refs. 

this.on("mount", function() {
   this.refs.clickButton.onclick = function(e) {
      console.log("clickButton clicked");
      return false;
   };
})

пример

Ниже приведен полный пример.

custom6Tag.tag 

<custom6Tag>
   <form ref = "customForm">
      <input ref = "username" type = "text" value = "Mahesh"/>
      <button ref = "clickButton">Click Me!</button>
      <input type = "submit" value = "Submit" />
   </form>
   <script>
      this.on("mount", function() {
         this.refs.clickButton.onclick = function(e) {
            console.log("clickButton clicked");
            return false;
         };
         this.refs.customForm.onsubmit = function(e) {
            console.log("Form submitted");
            return false;
         };
      }) 
   </script>
</custom6Tag>

custom6.htm 

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

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

RIOT.JS — Петли

Мы можем перебирать массив примитивов RIOT или Objects и создавать / обновлять html-элементы на ходу. Используя «каждую» конструкцию, мы можем достичь этого.

  • Создать массив — Создать массив объекта.

Создать массив — Создать массив объекта. 

this.cities = [
   { city : "Shanghai" , country:"China" , done: true },
   { city : "Seoul"    , country:"South Korea" },
   { city : "Moscow"   , country:"Russia"      }
];

  • Добавьте каждый атрибут — теперь используйте атрибут «каждый».

Добавьте каждый атрибут — теперь используйте атрибут «каждый». 

<ul>
   <li each = { cities } ></li>
</ul>

  • Итерация массива объектов — Итерация массива с использованием свойств объекта.

Итерация массива объектов — Итерация массива с использованием свойств объекта. 

<input type = "checkbox" checked = { done }> { city } - { country }

пример

Ниже приведен полный пример.

custom7Tag.tag 

<custom7Tag>
   <style>
      ul {
         list-style-type: none;
      }
   </style>
   <ul>
      <li each = { cities } >
         <input type = "checkbox" checked = { done }> { city } - { country }
      </li>
   </ul>
   <script>
      this.cities = [
         { city : "Shanghai" , country:"China" , done: true },
         { city : "Seoul"    , country:"South Korea" },
         { city : "Moscow"   , country:"Russia"      }
      ]; 
   </script>
</custom7Tag>

custom7.htm 

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

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

RIOT.JS — Mixin

Через Mixin мы можем делиться общей функциональностью между тегами. Mixin может быть функцией, классом или объектом. Рассмотрим случай службы аутентификации, которую должен использовать каждый тег.

  • Define Mixin — Определите mixin с помощью метода riot.mixin () перед вызовом mount ().

Define Mixin — Определите mixin с помощью метода riot.mixin () перед вызовом mount (). 

riot.mixin('authService', {
   init: function() {
      console.log('AuthService Created!')
   },

   login: function(user, password) {
      if(user == "admin" && password == "admin"){
         return 'User is authentic!'
      }else{
         return 'Authentication failed!'
      }   
   }
});

  • Инициализировать миксин — Инициализировать миксин в каждом теге.

Инициализировать миксин — Инициализировать миксин в каждом теге. 

this.mixin('authService')

  • Использовать миксин — после инициализации миксин можно использовать внутри тега.

Использовать миксин — после инициализации миксин можно использовать внутри тега. 

this.message = this.login("admin","admin");

пример

Ниже приведен полный пример.

custom8Tag.tag 

<custom8Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin","admin")
   </script>
</custom8Tag>

custom9Tag.tag 

<custom9Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin1","admin")
   </script>
</custom9Tag>

custom8.htm 

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom8Tag></custom8Tag>
      <custom9Tag></custom9Tag>
      <script src = "custom8Tag.tag" type = "riot/tag"></script>
      <script src = "custom9Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mixin('authService', {
            init: function() {
               console.log('AuthService Created!')
            },
            login: function(user, password) {
               if(user == "admin" && password == "admin"){
                  return 'User is authentic!'
               }else{
                  return 'Authentication failed!'
               }   
            }
         });
         riot.mount("*");
      </script>
   </body>
</html>

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

RIOT.JS — Наблюдаемые

Механизм Observables позволяет RIOT отправлять события из одного тега в другой. Следующие API важны для понимания наблюдаемых RIOT.

  • riot.observable (element) — добавляет поддержку Observer для данного элемента объекта или, если аргумент пуст, создается и возвращается новый наблюдаемый экземпляр. После этого объект может запускать и прослушивать события.

riot.observable (element) — добавляет поддержку Observer для данного элемента объекта или, если аргумент пуст, создается и возвращается новый наблюдаемый экземпляр. После этого объект может запускать и прослушивать события. 

var EventBus = function(){
   riot.observable(this);
}

  • element.trigger (events) — выполняет все функции обратного вызова, которые прослушивают данное событие.

element.trigger (events) — выполняет все функции обратного вызова, которые прослушивают данное событие. 

sendMessage() {
   riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
}

  • element.on (events, callback) — прослушивает данное событие и выполняет обратный вызов каждый раз, когда событие инициируется.

element.on (events, callback) — прослушивает данное событие и выполняет обратный вызов каждый раз, когда событие инициируется. 

riot.eventBus.on('message', function(input) {      
   console.log(input);
});

пример

Ниже приведен полный пример.

custom10Tag.tag 

<custom10Tag>
   <button onclick = {sendMessage}>Custom 10</button>
   <script>
      sendMessage() {
         riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');    
      }
   </script>    
</custom10Tag>

custom11Tag.tag 

<custom11Tag>
   <script>
      riot.eventBus.on('message', function(input) {      
         console.log(input);
      });
   </script>    
</custom11Tag>

custom9.htm 

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom10Tag></custom10Tag>
      <custom11Tag></custom11Tag>
      <script src = "custom10Tag.tag" type = "riot/tag"></script>
      <script src = "custom11Tag.tag" type = "riot/tag"></script>
      <script>
         var EventBus = function(){
            riot.observable(this);
         }
         riot.eventBus = new EventBus();
         riot.mount("*");
      </script>
   </body>
</html>

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

64
Share: