在 Web 元件中建立互動式表單時學習範本標籤（學習 Modulo.js

? Hey all, welcome back this week! Each tutorial is self-contained, so feel free to start at the beginning, or just plunge in here.

Note: Due to a bug with Dev.To, I'm unable to publish this tutorial normally. The fenced code blocks do not support template syntax, causing the markdown parser to crash.

Introducing: The NewsletterSubscribe Component

Learn template-tags while creating interactive forms in a web component (Learn Modulo.js - Part f

In Part 6, we'll be creating a custom, interactive sign-up form that only shows the newsletters to subscribe when the user chooses. This will give us practice with some very useful techniques, while building up our knowledge of template-tags, a core concept in templating.

Starting snippet

In this tutorial, we will start with Props, just like with the PictureFrame component in Part 2.

As with previous tutorials, you can simply copy and paste this code into any HTML file to start:


<template Modulo>
    <Component name="NewsletterSubscribe">
        <Template>
            <form method="POST">
                <h2>Learn Modulo.js - Sign-Up Component</h2>
                <label><strong>Email:</strong><input [state.bind] name="email" /></label>
                <label>
                    <input [state.bind] name="subscribe" type="checkbox" />
                    I want to subscribe to receive news and special offers
                </label>
                <label>
                    <input [state.bind] name="newsletters.kombucha" type="checkbox" />
                    Kombucha Enthusiast Newsletter
                </label>
                <button>Submit</button>
            </form>
        </Template>
        <State
            email=""
            subscribe:=false
            newsletters:={}
            newsletters.kombucha:=true
            newsletters.soda:=false
            newsletters.wine:=true
            newsletters.beer:=false
        ></State>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-NewsletterSubscribe></x-NewsletterSubscribe>

登入後複製

Important things to note: Look at how "State" is set-up. Do you see how newsletters:={} assigns to a JavaScript Object (designated with {}), and how then kombucha, soda, wine, and beer are all assigned with the syntax newsletters.kombucha, etc? This creates an Object that ends up looking like: { "kombucha": true, "soda": false ... }. This is a short-hand in Modulo for creating such objects. Also, note how name="newsletters.kombucha" must specify the full name, including the dot (.), to access that true/false value.

Introducing Part 6: Template Tags

In addition to filters, the Modulo templating language also support powerful "template tags", which allow for more complicated custom behavior. This includes the next two topics in this tutorial: "if" template-tag, which allows for conditional rendering (e.g. "only show the submit button if a form is filled correctly", or "only show the modal if the user has clicked the button"), and the "for" template-tag, which allows for HTML to be repeated for each item of some given data (e.g. "every blog post gets it's own

element", or "every field of data gets it's own form field").

Syntax

Unlike template variables or filters, they use {% and %} (instead of {{ and }}) to designate where they are in the Template code. Template tags are in the format of {% tag %}. They allow for more complicated transformations to the HTML code generated. For example, here are a few: {% include other_template %} {% comment %} ... {% endcomment %}

The if-tag

One of the most useful template tags you will use is the if tag, written like this: {% if %}. The if-tag allows for conditional rendering of HTML code based on the condition supplied.

See below for two examples of using the "if" tag:

{% if state.expanded %}

Details: {{ props.details }}

請注意，其中還有另外兩個標籤。這些與 if 標籤相關，並且只會顯示在 if 標籤之後。第一個是 {% endif %} 標籤。這是必需的，因為它顯示了您希望 if 標記有條件包含的內容的模數。第二個是 {% else %} 標籤。 {% else %} 是可選的，如第一個範例所示：您不需要在 if 標籤的所有用途中使用它。

第 1 步：可選擇顯示康普茶複選框

讓我們從基於 state.subscribe 的 if 語句開始。邏輯是，如果用戶根本不想訂閱，我們甚至不應該顯示額外的新聞通訊選項。我們可以透過以下方式實現這一點：

第 2 步：使用「else」顯示填寫電子郵件的提示

現在，讓我們練習使用更複雜的 if 語句來顯示提示，而不是「訂閱」表單按鈕，直到他們開始輸入幾個字元。電子郵件（可能）永遠不應短於 4 個字符，因此我們將其用作閾值。我們可以使用 lt（小於，又稱

步驟 3：使用 for 迴圈列出時事通訊

讓我們從一個簡單的 for 循環「測試」開始，然後我們將在下一步中對其進行擴展：

重要提示：總是將模板標籤放在 HTML 值中！不要執行類似 {% if value %}style="color: blue"{% endif %} 的操作，而是執行 style="{% if value %}color: blue{% endif %}" 之類的操作。否則，{% 等可能會被解釋為無值屬性，您的程式碼中會充斥著 {%=""。

第 4 步：新增回輸入

這將循環遍歷每個新聞通訊，如果「value」為 true，則將其呈現為綠色。但是，它不會建立切換輸入。我們需要在 name= 屬性中使用 {{ key }} 屬性。檢查輸入的以下調整：

將其放入 for 循環中，無論您有多少新聞通訊，它都會自動產生複選框！

- 完整範例

最後，我們將所有內容放在一起，添加|capfirst 進行格式化，然後加入帶有一些非常基本樣式的Style 部分，以使表單看起來更好一點，最終我們得到了最終結果。請隨意複製並貼上以下內容來嘗試：

由於 Dev.To 的錯誤，我無法包含原始程式碼。不過，您可以在以下要點中看到它：

結論

在本節中，我們練習使用模板標籤來製作更用戶友好的表單。在下一個教程中，我們將開始深入研究Modulo 的一些優勢，包括資料類型、StaticData 和API 集成，因此請務必遵循以下教程來學習如何編寫聲明性程式碼以在一個簡單的範例中連接API。幾行！

以上是在 Web 元件中建立互動式表單時學習範本標籤（學習 Modulo.js - 第 f 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！