웹 구성 요소에서 대화형 양식을 생성하는 동안 템플릿 태그를 알아보세요(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 태그에 조건부로 포함할 내용을 Modulo로 표시하므로 이는 필수입니다. 두 번째는 {% else %} 태그입니다. 첫 번째 예에서 알 수 있듯이 {% else %}는 선택 사항입니다. if 태그를 사용할 때마다 필요하지는 않습니다.

1단계: 선택적으로 Kombucha 확인란 표시

state.subscribe를 기반으로 하는 if 문부터 시작하겠습니다. 사용자가 구독을 전혀 원하지 않는 경우 추가 뉴스레터 옵션도 표시해서는 안 된다는 논리입니다. 다음을 통해 이를 달성할 수 있습니다.

{% if state.subscribe %}
<라벨>

콤부차 매니아 뉴스레터

{% endif %}

이제 "구독"을 클릭하면 뉴스레터를 선택할 수 있는 옵션만 표시됩니다.

2단계: "else"를 사용하여 이메일 작성에 대한 힌트를 표시하세요.

이제 몇 글자를 입력하기 시작할 때까지 '구독' 양식 버튼 대신 힌트를 표시하는 더 복잡한 if 문을 사용하여 연습해 보겠습니다. 이메일은 (아마도) 4자보다 짧아서는 안 되므로 이를 임계값으로 사용해 보겠습니다. lt(보다 작음, a.k.a. <) 연산자를 사용하여 비교할 수 있습니다. 아래를 참조하세요:

3단계: for 루프를 사용하여 뉴스레터 나열

간단한 for-loop "테스트"로 시작한 후 다음 단계에서 이를 확장해 보겠습니다.

중요 사항: 항상 템플릿 태그를 HTML 값 내부에 넣으세요! {% if value %}style="color: blue"{% endif %} 같은 작업을 수행하지 말고 대신 style="{% if value %}color: blue{% endif %}"를 수행하세요. 그렇지 않으면 {% 등이 가치가 없는 속성으로 해석되어 코드가 {%=""로 뒤덮일 수 있습니다.

4단계: 입력에 다시 추가

이렇게 하면 각 뉴스레터가 반복되며 "값"이 true인 경우 녹색으로 렌더링됩니다. 그러나 토글 입력은 생성되지 않습니다. name= 속성 내에서 {{ key }} 속성을 사용해야 합니다. 입력에 대한 다음 조정을 검토하십시오.

이것을 for 루프 안에 넣으면 뉴스레터 수에 관계없이 체크박스가 자동으로 생성됩니다!

- 완전한 예

마지막으로 모든 것을 하나로 모으고 서식 지정을 위한 |capfirst를 추가하고 아주 기본적인 스타일링이 포함된 Style 부분을 추가하여 양식을 좀 더 보기 좋게 만들고 다음과 같은 결과를 얻습니다. 최종 결과. 다음을 복사하여 붙여넣어 사용해 보세요.

Dev.To의 버그로 인해 소스코드를 포함할 수 없습니다. 그러나 다음 Gist에서 확인할 수 있습니다.

결론

이 섹션에서는 보다 사용자 친화적인 양식을 만들기 위해 템플릿 태그를 사용하는 방법을 연습합니다. 다음 튜토리얼에서는 데이터 유형, StaticData 및 API 통합을 통해 Modulo의 몇 가지 장점을 자세히 살펴보겠습니다. 몇 줄!

위 내용은 웹 구성 요소에서 대화형 양식을 생성하는 동안 템플릿 태그를 알아보세요(Modulo.js 학습 - 파트 f의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!