RIOT.JS-概要

RIOT.jsは、Webアプリケーションを開発するための非常に小さいサイズ/軽量のWebコンポーネントベースのUIライブラリです。 React.JSとPolymerの利点を、非常に簡潔な実装と学習して使用するための単純な構造と組み合わせます。縮小版のサイズはほぼ10 KBです。

RIOT.jsの主要な機能は次のとおりです

式バインディング

DOM更新およびリフロー中の非常に小さなペイロード。
変更は、親タグから子タグ/コントロールに下方に伝播します。
事前にコンパイルされた式を使用し、それらをキャッシュして高パフォーマンスを実現します。
ライフサイクルイベントを適切に制御します。

基準に従う

独自のイベントシステムはありません
ポリフィルライブラリに依存しません。
既存のHTMLに追加の属性は追加されません。
jQueryとうまく統合します。

基本的価値観

RIOT.jsは、以下の値を考慮して開発されています。

シンプルでミニマル。
学習と実装が簡単。
ユーザーインターフェイスを構築するためのリアクティブビューを提供します。
イベントライブラリを提供して、独立したモジュールでAPIを構築します。
ブラウザの戻るボタンでアプリケーションの動作を処理します。

RIOT.JS-環境設定

RIOT jsを使用するには2つの方法があります。

ローカルインストール-ローカルマシンにRIOTライブラリをダウンロードして、HTMLコードに含めることができます。
* CDNベースのバージョン*-Content Delivery Network（CDN）から直接RIOTライブラリをHTMLコードに含めることができます。

ローカルインストール

[[1]]
次に、ダウンロードした riot.min.js ファイルをWebサイトのディレクトリに置きます。/riotjs。

例

これで、次のようにHTMLファイルに_riotjs_ライブラリを含めることができます-

<!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ライブラリーをContent Delivery Network（CDN）から直接HTMLコードに含めることができます。 GoogleとMicrosoftは、最新バージョンのコンテンツ配信を提供しています。

注意-このチュートリアルでは、CDNJSバージョンのライブラリを使用しています。

例

ここで、CDNJSのjQueryライブラリを使用して上記の例を書き換えましょう。

<!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タグを作成することで機能します。これらのタグはWebコンポーネントに似ており、ページおよびWebアプリ全体で再利用できます。

RIOTを使用する手順

HTMLページでriot.jsをインポートします。

<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を渡します。マウントプロセスは、htmlページ内のすべての出現箇所でmessageTagをマウントします。 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タグを作成することで機能します。これらのタグはWebコンポーネントに似ており、ページおよびWebアプリ全体で再利用できます。 HTMLページにRIOTフレームワークを含めると、インポートされたjsはriotオブジェクトを指すriot変数を作成します。このオブジェクトには、タグの作成やマウントなど、RIOT.jsと対話するために必要な関数が含まれています。

タグを作成して使用するには2つの方法があります。

*インライン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>

索引

<!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 finddevguides.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 finddevguides.COM";
      this.val = 4;
   </script>
</customTag>

索引

<!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 finddevguides.COM";
      this.subTitle = "Learning RIOT JS";
      this.subTitleClass = "subHeader";
   </script>
</custom1Tag>

索引

<!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がサポートする3つの条件です-

if -渡された値に基づいて要素を追加/削除します。

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

show -trueが渡された場合、style = " _display： _ "を使用して要素を表示します。

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

hide -trueが渡された場合、style = " _display： 'none' _ "を使用して要素を非表示にします。

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

カスタム2

<!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タグに入れるメカニズムです。利回りを行う方法は複数あります。

Simple Yield -タグ内の単一のプレースホルダーを置き換えたい場合。次に、このメカニズムを使用します。

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

<custom3Tag><b>User</b></custom3Tag>

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>

カスタム3

<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-イベント処理

refsオブジェクトを使用してHTML要素にアクセスする方法と同様の方法で、HTML要素にイベントを添付できます。最初のステップとして、ref属性をDOM要素に追加し、タグのスクリプトブロックでthis.refを使用してそれにアクセスします。

Attach ref -DOM要素にref属性を追加します。

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

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

カスタム5

<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へのアクセス

refsオブジェクトを使用してHTML要素にアクセスできます。最初のステップとして、ref属性をDOM要素に追加し、タグのスクリプトブロックでthis.refを使用してそれにアクセスします。

Attach ref -DOM要素にref属性を追加します。

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

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

カスタム6

<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のプリミティブまたはオブジェクトの配列を反復処理し、外出先でhtml要素を作成/更新できます。「各」構造を使用して、それを達成できます。

Create array -オブジェクトの配列を作成します。

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>

カスタム7

<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は、関数、クラス、またはオブジェクトにすることができます。各タグが使用する必要がある認証サービスの場合を考えます。

Define Mixin -mount（）を呼び出す前にriot.mixin（）メソッドを使用してmixinを定義します。

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!'
      }
   }
});

* mixinの初期化*-各タグでmixinを初期化します。

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>

カスタム8

<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は1つのタグから別のタグにイベントを送信できます。 RIOTオブザーバブルを理解するには、次のAPIが重要です。

* riot.observable（element）*-指定されたオブジェクト要素のObserverサポートを追加するか、引数が空の場合、新しいobservableインスタンスが作成されて返されます。この後、オブジェクトはイベントをトリガーしてリッスンできます。

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

* element.trigger（events）*-指定されたイベントをリッスンするすべてのコールバック関数を実行します。

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

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

カスタム9

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

これにより、次の結果が生成されます–

Riotjs-quick-guide

RIOT.JS-概要

式バインディング

基準に従う

基本的価値観

RIOT.JS-環境設定

ローカルインストール

例

CDNベースのバージョン

例

RIOT.JS-最初のアプリケーション

RIOTを使用する手順

例

RIOT.JS-タグ

例

例

messageTag.tag

索引

RIOT.JS-式

例

customTag.tag

索引

RIOT.JS-スタイリング

custom1Tag.tag

索引

RIOT.JS-条件付き

例

custom2Tag.tag

カスタム2

RIOT.JS-利回り

例

custom3Tag.tag

custom4Tag.tag

カスタム3

RIOT.JS-イベント処理

例

custom5Tag.tag

カスタム5

RIOT.JS-DOMへのアクセス

例

custom6Tag.tag

カスタム6

RIOT.JS-ループ

例

custom7Tag.tag

カスタム7

RIOT.JS-ミックスイン

例

custom8Tag.tag

custom9Tag.tag

カスタム8

RIOT.JS-オブザーバブル

例

custom10Tag.tag

custom11Tag.tag

カスタム9