data-for

ภาพรวม

data-for แสดงผลรายการ elements โดยการวนลูป array ต้องมี <template> element ภายในเพื่อกำหนดโครงสร้างของแต่ละรายการ

ใช้เมื่อ:

• แสดงรายการหรือตารางจากข้อมูล
• Render components ซ้ำๆ
• แสดง collections ของรายการ

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

• ✅ Render รายการอย่างมีประสิทธิภาพพร้อม diffing
• ✅ มีตัวแปร index ในลูป
• ✅ รองรับ nested loops
• ✅ ทำงานร่วมกับ directives อื่นๆ ได้

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

รายการอย่างง่าย

<ul data-for="item in items">
  <template>
    <li data-text="item.name"></li>
  </template>
</ul>

กับข้อมูล:

{
  items: [
    { name: "แอปเปิ้ล" },
    { name: "กล้วย" },
    { name: "เชอร์รี่" }
  ]
}

ผลลัพธ์:

<ul>
  <li>แอปเปิ้ล</li>
  <li>กล้วย</li>
  <li>เชอร์รี่</li>
</ul>

Syntax

<container data-for="itemVar in arrayExpression">
  <template>
    <!-- เนื้อหา template รายการ -->
  </template>
</container>

ฟีเจอร์

1. เข้าถึง Item Properties

<div data-for="user in users">
  <template>
    <div class="user-card">
      <h3 data-text="user.name"></h3>
      <p data-text="user.email"></p>
    </div>
  </template>
</div>

2. ตัวแปร Index

ตัวแปร index มีให้ใช้อัตโนมัติ (เริ่มจาก 0):

<ol data-for="item in items">
  <template>
    <li>
      <span data-text="index + 1"></span>.
      <span data-text="item.name"></span>
    </li>
  </template>
</ol>

ผลลัพธ์:

<ol>
  <li>1. แอปเปิ้ล</li>
  <li>2. กล้วย</li>
  <li>3. เชอร์รี่</li>
</ol>

3. ใช้ of Keyword

ใช้ได้ทั้ง in และ of:

<!-- ทั้งสองเทียบเท่ากัน -->
<div data-for="item in items">...</div>
<div data-for="item of items">...</div>

4. Nested Arrays

<div data-for="category in categories">
  <template>
    <h2 data-text="category.name"></h2>
    <ul data-for="product in category.products">
      <template>
        <li data-text="product.name"></li>
      </template>
    </ul>
  </template>
</div>

5. กับ Directives อื่น

<ul data-for="item in items">
  <template>
    <li data-class="active:item.isActive"
        data-attr="id:'item-' + index">
      <span data-text="item.name"></span>
      <span data-if="item.isNew" class="badge">ใหม่</span>
    </li>
  </template>
</ul>

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

Product Grid

<div class="product-grid" data-for="product in products">
  <template>
    <div class="product-card" data-attr="id:'product-' + product.id">
      <img data-attr="src:product.image, alt:product.name">
      <h3 data-text="product.name"></h3>
      <p class="price" data-text="product.price | currency:'THB'"></p>
      <p class="stock" data-if="product.stock > 0">
        ในสต็อก: <span data-text="product.stock"></span>
      </p>
      <p class="out-of-stock" data-if="product.stock === 0">
        หมด
      </p>
      <button data-on="click:addToCart(product)"
              data-attr="disabled:product.stock === 0">
        เพิ่มลงตะกร้า
      </button>
    </div>
  </template>
</div>

ตารางข้อมูล

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>ชื่อ</th>
      <th>อีเมล</th>
      <th>สถานะ</th>
      <th>การดำเนินการ</th>
    </tr>
  </thead>
  <tbody data-for="user in users">
    <template>
      <tr data-class="inactive:!user.isActive">
        <td data-text="index + 1"></td>
        <td data-text="user.name"></td>
        <td data-text="user.email"></td>
        <td>
          <span data-class="user.isActive ? 'badge-success' : 'badge-secondary'"
                data-text="user.isActive ? 'Active' : 'Inactive'">
          </span>
        </td>
        <td>
          <button data-on="click:editUser(user.id)">แก้ไข</button>
          <button data-on="click:deleteUser(user.id)">ลบ</button>
        </td>
      </tr>
    </template>
  </tbody>
</table>

เมนูนำทาง

<nav>
  <ul class="menu" data-for="item in menuItems">
    <template>
      <li data-class="active:item.isActive, has-children:item.children.length > 0">
        <a data-attr="href:item.url" data-text="item.label"></a>

        <ul data-if="item.children.length > 0" class="submenu" data-for="child in item.children">
          <template>
            <li>
              <a data-attr="href:child.url" data-text="child.label"></a>
            </li>
          </template>
        </ul>
      </li>
    </template>
  </ul>
</nav>

Timeline

<div class="timeline" data-for="event in timeline">
  <template>
    <div class="timeline-item"
         data-class="first:index === 0, last:index === timeline.length - 1">
      <div class="timeline-marker"></div>
      <div class="timeline-content">
        <time data-text="event.date | date:'D MMM YYYY'"></time>
        <h4 data-text="event.title"></h4>
        <p data-text="event.description"></p>
      </div>
    </div>
  </template>
</div>

API อ้างอิง

ตัวแปรที่มีให้ใช้

Syntax ของ Expression

ข้อควรระวัง

⚠️ 1. ไม่มี Template Element

<!-- ❌ ผิด - ไม่มี template -->
<ul data-for="item in items">
  <li data-text="item.name"></li>
</ul>

<!-- ✅ ถูก - มี template -->
<ul data-for="item in items">
  <template>
    <li data-text="item.name"></li>
  </template>
</ul>

⚠️ 2. ขอบเขตตัวแปร Item

<!-- ❌ item ไม่สามารถเข้าถึงนอกลูป -->
<div data-for="item in items">
  <template>
    <span data-text="item.name"></span>
  </template>
</div>
<p data-text="item.name"></p> <!-- ไม่ทำงาน -->

⚠️ 3. ค่าที่ไม่ใช่ Array

// ❌ data-for ต้องการ array
{ items: "ไม่ใช่ array" }
{ items: null }

// ✅ ให้ array เสมอ
{ items: [] }
{ items: [{ name: "รายการ" }] }

เคล็ดลับประสิทธิภาพ

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

• data-if - สำหรับรายการแบบมีเงื่อนไขในลูป
• data-text - สำหรับแสดงข้อมูลรายการ
• data-on - สำหรับ event handlers ของรายการ