data-if

ภาพรวม

data-if แสดงผล elements ตามเงื่อนไข Elements จะถูกลบออกจาก DOM ทั้งหมดเมื่อเงื่อนไขเป็น false

ใช้เมื่อ:

• แสดง/ซ่อนเนื้อหาตามสถานะข้อมูล
• แสดง components แบบมีเงื่อนไข
• สลับส่วนต่างๆ ตามสิทธิ์ผู้ใช้

ทำไมต้องใช้:

• ✅ ลบออกจาก DOM ทั้งหมด (ไม่ใช่แค่ซ่อน)
• ✅ รองรับ expressions ซับซ้อน
• ✅ รองรับ animation สำหรับ transitions
• ✅ Cleanup nested directives อัตโนมัติ

การใช้งานพื้นฐาน

เงื่อนไขอย่างง่าย

<div data-if="isLoggedIn">
  ยินดีต้อนรับกลับมา!
</div>

กับข้อมูล:

{ isLoggedIn: true }

ผลลัพธ์เมื่อ true:

<div>ยินดีต้อนรับกลับมา!</div>

ผลลัพธ์เมื่อ false:

<!-- Element ถูกลบออกจาก DOM -->

Syntax

<element data-if="expression">

ฟีเจอร์

1. เงื่อนไข Boolean

<div data-if="isVisible">เนื้อหาที่มองเห็น</div>
<div data-if="!isHidden">เนื้อหาที่ไม่ซ่อน</div>

2. การมีอยู่ของ Property

<div data-if="user.avatar">
  <img data-attr="src:user.avatar">
</div>

3. Comparison Operators

<div data-if="count > 0">คุณมีรายการ</div>
<div data-if="status === 'active'">สถานะ active</div>
<div data-if="items.length >= 5">มีหลายรายการ</div>

4. Logical Operators

<div data-if="isLoggedIn && isAdmin">แผงควบคุมแอดมิน</div>
<div data-if="hasError || isLoading">แสดงข้อความ</div>
<div data-if="!isDisabled">เนื้อหาที่เปิดใช้งาน</div>

5. Expressions ซับซ้อน

<div data-if="user.role === 'admin' && permissions.includes('edit')">
  ปุ่มแก้ไข
</div>

6. การปฏิเสธ (Negation)

<div data-if="!isLoggedIn">
  <a href="/login">กรุณาเข้าสู่ระบบ</a>
</div>

รูปแบบ If-Else

เนื่องจากไม่มี data-else ให้ใช้เงื่อนไขปฏิเสธ:

<div data-if="isLoggedIn">
  <p>ยินดีต้อนรับ <span data-text="user.name"></span>!</p>
</div>

<div data-if="!isLoggedIn">
  <a href="/login">เข้าสู่ระบบ</a>
</div>

หลายเงื่อนไข (รูปแบบ else-if)

<div data-if="status === 'loading'">
  <div class="spinner">กำลังโหลด...</div>
</div>

<div data-if="status === 'error'">
  <div class="error">เกิดข้อผิดพลาด</div>
</div>

<div data-if="status === 'success'">
  <div class="content" data-text="data"></div>
</div>

การรองรับ Animation

เพิ่ม class animated สำหรับ enter/exit animations:

<div data-if="showModal" class="modal animated">
  <div class="modal-content">
    เนื้อหา Modal
  </div>
</div>

CSS:

.modal.animated {
  animation: fadeIn 0.3s ease;
}

.modal.fade-out {
  animation: fadeOut 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

เมื่อมี class animated:

• แสดง: เพิ่ม fade-in, animate-in classes
• ซ่อน: เพิ่ม fade-out, animate-out classes, รอ animation

ตัวอย่างขั้นสูง

การยืนยันตัวตนผู้ใช้

<header>
  <div data-if="user.isLoggedIn" class="user-menu">
    <img data-attr="src:user.avatar" class="avatar">
    <span data-text="user.name"></span>
    <button data-on="click:logout">ออกจากระบบ</button>
  </div>

  <div data-if="!user.isLoggedIn">
    <a href="/login">เข้าสู่ระบบ</a>
    <a href="/register">สมัครสมาชิก</a>
  </div>
</header>

UI ตามสิทธิ์

<div class="actions">
  <button data-if="permissions.canView" data-on="click:view">ดู</button>
  <button data-if="permissions.canEdit" data-on="click:edit">แก้ไข</button>
  <button data-if="permissions.canDelete" data-on="click:delete">ลบ</button>
</div>

สถานะการโหลด

<div class="data-container">
  <!-- สถานะกำลังโหลด -->
  <div data-if="isLoading" class="spinner animated">
    <div class="loader"></div>
    <p>กำลังโหลด...</p>
  </div>

  <!-- สถานะ error -->
  <div data-if="!isLoading && error" class="error-message">
    <p data-text="error.message"></p>
    <button data-on="click:retry">ลองใหม่</button>
  </div>

  <!-- สถานะว่าง -->
  <div data-if="!isLoading && !error && items.length === 0">
    <p>ไม่พบรายการ</p>
  </div>

  <!-- เนื้อหา -->
  <div data-if="!isLoading && !error && items.length > 0">
    <ul data-for="item in items">
      <template>
        <li data-text="item.name"></li>
      </template>
    </ul>
  </div>
</div>

เงื่อนไขซ้อน

<div data-if="order">
  <h2>รายละเอียดคำสั่งซื้อ</h2>

  <div data-if="order.status === 'pending'">
    <p class="warning">รอชำระเงิน</p>
    <button data-on="click:pay">ชำระเงินตอนนี้</button>
  </div>

  <div data-if="order.status === 'completed'">
    <p class="success">คำสั่งซื้อเสร็จสมบูรณ์</p>
    <div data-if="order.hasReceipt">
      <a data-attr="href:order.receiptUrl">ดาวน์โหลดใบเสร็จ</a>
    </div>
  </div>
</div>

API อ้างอิง

Expression Operators

ค่า Truthy/Falsy

ข้อควรระวัง

⚠️ 1. Element vs Display:none

<!-- data-if ลบ element ออกจาก DOM -->
<div data-if="show">เนื้อหา</div>

<!-- สำหรับแค่ซ่อน ใช้ CSS -->
<div data-style="{ display: show ? 'block' : 'none' }">เนื้อหา</div>
<div data-class="hidden:!show">เนื้อหา</div>

⚠️ 2. การเข้าถึง Element ที่ถูกลบ

// ❌ Element อาจไม่มีเมื่อเงื่อนไขเป็น false
const elem = document.querySelector('[data-if]');
elem.textContent; // Error ถ้า element ถูกลบ

// ✅ ตรวจสอบก่อน
if (elem) {
  elem.textContent;
}

⚠️ 3. ประสิทธิภาพการสลับบ่อย

<!-- ❌ การสลับบ่อยอาจแพง -->
<div data-if="mouseOver">Tooltip</div>

<!-- ✅ ใช้ CSS สำหรับการสลับบ่อย -->
<div data-class="visible:mouseOver" class="tooltip">Tooltip</div>

Directives ที่เกี่ยวข้อง

• data-for - สำหรับ render รายการ
• data-class - สำหรับ visibility ด้วย class
• data-style - สำหรับ visibility ด้วย style