RIOT.JS - 標記

上一個
下一個

RIOT 透過構建自定義的可複用 HTML 標記而起作用。這些標記類似於 Web 元件，可以在頁面和 Web 應用程式中重複使用。在 HTML 頁面中包含 RIOT 框架時，匯入的 js 會建立一個指向 riot物件的 riot 變數。此物件包含與 RIOT.js 互動所需的功能，例如建立和裝入標記。

我們可以建立和使用標記有兩種方式。

  • 內聯 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>

這將產生以下結果 -

列印頁面
前一個
下一個
廣告