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

他にも 2 つのタグが混在していることに注意してください。これらは if タグに関連しており、if タグの後にのみ表示されます。 1 つ目は {% endif %} タグです。これは、条件付きで if タグに含めたいものを Modulo に示すため、必須です。 2 番目は {% else %} タグです。最初の例でわかるように、{% else %} はオプションです。if タグのすべての使用に必要ありません。

ステップ 1: 必要に応じて、Kombucha チェックボックスを表示します

state.subscribe に基づく if ステートメントから始めましょう。そのロジックは、ユーザーが購読をまったく希望しない場合は、追加のニュースレターオプションさえ表示すべきではないということです。これは次のようにして実現できます:

{% if state.subscribe %}

コンブチャ愛好家向けニュースレター

{% endif %}

これにより、「購読」をクリックしたときにニュースレターを選択するオプションのみが表示されます。

ステップ 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 のバグのため、ソースコードを含めることができません。ただし、次の要点で確認できます:

結論

このセクションでは、テンプレートタグを使用して、よりユーザーフレンドリーなフォームを作成する練習をします。次のチュートリアルでは、データ型、StaticData、API 統合など、Modulo の長所の一部を掘り下げていきます。そのため、API を接続するための宣言型コードの作成方法を必ず学習してください。数行!

以上がWeb コンポーネントでインタラクティブなフォームを作成しながらテンプレートタグを学習します (Modulo.js を学習する - パート f)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。