data-text

ภาพรวม

data-text เชื่อมค่าข้อมูลกับ text content ของ element เป็น directive ที่ใช้บ่อยที่สุดสำหรับแสดงข้อความแบบ dynamic

ใช้เมื่อ:

• แสดงข้อความจาก data objects
• แสดงข้อมูลผู้ใช้ labels หรือเนื้อหาแบบ dynamic
• จัดรูปแบบค่าด้วย pipes (formatters)

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

• ✅ แสดงข้อความอย่างปลอดภัย (ป้องกัน XSS)
• ✅ รองรับ formatters ผ่าน pipe syntax
• ✅ Reactive - อัพเดทอัตโนมัติเมื่อข้อมูลเปลี่ยน
• ✅ รองรับ nested properties

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

Text Binding อย่างง่าย

<span data-text="username"></span>

กับข้อมูล:

{ username: "สมชาย ใจดี" }

ผลลัพธ์:

<span>สมชาย ใจดี</span>

Nested Properties

<span data-text="user.profile.name"></span>

กับข้อมูล:

{
  user: {
    profile: {
      name: "สมหญิง รักเรียน"
    }
  }
}

ผลลัพธ์:

<span>สมหญิง รักเรียน</span>

Syntax

<element data-text="expression | formatter1 | formatter2">

กติกาการ parse เครื่องหมาย |

data-text จะประเมิน expression ก่อน แล้วจึงใช้ formatters ที่คั่นด้วย | เฉพาะตัวที่อยู่ระดับบนสุดของ expression เท่านั้น

• | ตัวเดียวที่อยู่ระดับบนสุด จะถูกมองเป็นตัวเริ่ม formatter
• || ยังเป็น JavaScript fallback operator ตามปกติ
• | ที่อยู่ใน string จะถือเป็นข้อความ ไม่ใช่ตัวคั่น formatter
• | ที่อยู่ใน expression ซ้อนอย่าง (), [], {} จะยังไม่ถูกแยกจนกว่าจะกลับมาระดับบนสุด

ตัวอย่างที่ใช้ได้:

<span data-text="status || '-'"></span>
<span data-text="'Value ' + (status || '-')"></span>
<span data-text="(brand_name || '-') + ' | ' + (category_name || '-')"></span>
<span data-text="price | currency:THB"></span>

arguments ของ formatter จะถูกส่งต่อเป็น string ที่คั่นด้วย : ตรงๆ ไม่ต้องใส่ quote ครอบ

<span data-text="price | currency:THB:th-TH:4"></span>
<span data-text="created_at | date:D MMM YYYY"></span>

ความต่างระหว่าง || กับ default:

ใช้ || เมื่อต้องการ fallback ตามกติกา JavaScript สำหรับค่าที่เป็น falsy

<span data-text="status || '-'"></span>

ใช้ default: เมื่อต้องการ fallback แบบ formatter และแทนค่าเฉพาะ null กับ undefined

<span data-text="status | default:-"></span>

ความต่างสำคัญคือ:

• status || '-' จะแทนค่าเมื่อเป็น null, undefined, '', 0, และ false
• status | default:- จะแทนค่าเฉพาะ null และ undefined

ฟีเจอร์

1. Property Binding อย่างง่าย

<p data-text="title"></p>
<p data-text="description"></p>

2. การเข้าถึง Nested Object

<span data-text="product.category.name"></span>
<span data-text="order.customer.email"></span>

3. การเข้าถึง Array Index

<span data-text="items[0].name"></span>
<span data-text="users[2].email"></span>

4. Formatters (Pipes)

แปลงค่าโดยใช้ formatters:

<!-- ตัวพิมพ์ใหญ่ -->
<span data-text="name | uppercase"></span>

<!-- ตัวพิมพ์เล็ก -->
<span data-text="email | lowercase"></span>

<!-- จัดรูปแบบวันที่ -->
<span data-text="createdAt | date:D MMM YYYY"></span>

<!-- จัดรูปแบบตัวเลข -->
<span data-text="price | number:2"></span>

<!-- สกุลเงิน -->
<span data-text="total | currency:THB:th-TH:4"></span>

5. Chained Formatters

<span data-text="name | lowercase | capitalize"></span>

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

บัตรโปรไฟล์ผู้ใช้

<div class="profile-card">
  <h2 data-text="user.name"></h2>
  <p class="email" data-text="user.email | lowercase"></p>
  <p class="joined">
    สมาชิกตั้งแต่: <span data-text="user.createdAt | date:MMMM YYYY"></span>
  </p>
  <p class="status" data-text="user.status | uppercase"></p>
</div>

การแสดงสินค้า

<div class="product">
  <h3 data-text="product.name"></h3>
  <p class="price" data-text="product.price | currency:THB"></p>
  <p class="stock">
    ในสต็อก: <span data-text="product.quantity | number"></span>
  </p>
  <p class="category" data-text="product.category.name"></p>
</div>

ภายใน data-for Loop

<ul data-for="item in items">
  <template>
    <li>
      <span class="index" data-text="index + 1"></span>.
      <span class="name" data-text="item.name"></span>
      <span class="price" data-text="item.price | currency"></span>
    </li>
  </template>
</ul>

กับ Fallback Values

<span data-text="user.nickname || user.name || 'ไม่ระบุชื่อ'"></span>

<span data-text="user.nickname | default:ไม่ระบุชื่อ"></span>

API อ้างอิง

Expressions ที่รองรับ

Built-in Formatters

ข้อควรระวัง

⚠️ 1. อย่าใช้กับ HTML Content

<!-- ❌ ผิด - HTML จะถูก escape -->
<div data-text="htmlContent"></div>
<!-- ผลลัพธ์: &lt;strong&gt;Bold&lt;/strong&gt; -->

<!-- ✅ ถูก - ใช้ data-html -->
<div data-html="htmlContent"></div>

⚠️ 2. ตัวพิมพ์ใหญ่-เล็กใน Property Path

<!-- ❌ ผิด - ตัวพิมพ์ไม่ตรง -->
<span data-text="user.Name"></span>  <!-- ไม่ทำงานถ้า data มี 'name' -->

<!-- ✅ ถูก - ตรงกับชื่อ property จริง -->
<span data-text="user.name"></span>

⚠️ 3. การเข้าถึง Properties ที่ไม่มี

<!-- ❌ อาจแสดง 'undefined' -->
<span data-text="user.address.city"></span>

<!-- ✅ ใช้ optional chaining หรือ fallback -->
<span data-text="user.address?.city || 'ไม่ระบุ'"></span>

⚠️ 4. เลือกชนิด fallback ให้ตรงความหมาย

<!-- จะทับ 0 และ false ด้วย เพราะ || ใช้กติกา falsy ของ JavaScript -->
<span data-text="qty || '-'"></span>

<!-- จะคง 0 และ false ไว้ และแทนค่าเฉพาะ null/undefined -->
<span data-text="qty | default:-"></span>

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

• data-html - สำหรับ render HTML content
• data-attr - สำหรับ binding กับ attributes
• data-for - สำหรับวนลูปแสดงรายการ