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

ฟีเจอร์

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'"></span>

5. Chained Formatters

<span data-text="name | trim | uppercase"></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>

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>

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

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