RIOT.JS - Первое приложение
RIOT работает путем создания настраиваемых многоразовых тегов html. Эти теги похожи на веб-компоненты и могут повторно использоваться на страницах и в веб-приложениях.
Шаги по использованию RIOT
Импортируйте riot.js на html-страницу.
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
Запустите раздел сценария и определите содержимое тега как html. Также может быть включен скрипт, который мы увидим позже в руководстве.
var tagHtml = "<h1>Hello World!</h1>";
Определите тег с помощью метода riot.tag (). Передайте ему имя тега, messageTag и переменную, содержащую содержимое тега.
riot.tag("messageTag", tagHtml);
Установите тег с помощью метода 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>
Это даст следующий результат -