data-html

ภาพรวม

data-html แสดงผล HTML content ภายใน element ต่างจาก data-text ตรงที่จะตีความค่าเป็น HTML ทำให้แสดงเนื้อหาที่มีการจัดรูปแบบได้

ใช้เมื่อ:

• แสดง rich text content จาก CMS หรือ API
• แสดง HTML ที่แปลงจาก markdown
• แสดงคำอธิบายหรือบทความที่มี formatting

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

• ✅ แสดง HTML markup อย่างถูกต้อง
• ✅ มี sanitization ในตัวเพื่อความปลอดภัย
• ✅ อัพเดทแบบ reactive เมื่อข้อมูลเปลี่ยน
• ✅ ประมวลผล nested directives หลัง rendering

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

HTML Binding อย่างง่าย

<div data-html="content"></div>

กับข้อมูล:

{ content: "<strong>ตัวหนา</strong> และ <em>ตัวเอียง</em>" }

ผลลัพธ์:

<div><strong>ตัวหนา</strong> และ <em>ตัวเอียง</em></div>

จาก API Response

<article data-html="article.body"></article>

Syntax

<element data-html="expression">

ฟีเจอร์

1. แสดง Rich Content

<div class="content" data-html="post.content"></div>

กับข้อมูล:

{
  post: {
    content: `
      <h2>ยินดีต้อนรับ</h2>
      <p>นี่คือย่อหน้าที่มี <strong>การจัดรูปแบบ</strong></p>
      <ul>
        <li>รายการที่ 1</li>
        <li>รายการที่ 2</li>
      </ul>
    `
  }
}

2. รองรับ Nested Directives

HTML content สามารถมี data directives อื่นได้:

<div data-html="template"></div>

กับข้อมูล:

{
  template: '<span data-text="user.name"></span>',
  user: { name: "สมชาย" }
}

data-text ที่ซ้อนอยู่จะถูกประมวลผลหลัง rendering

3. Sanitization

โดยค่าเริ่มต้น เนื้อหาอันตรายจะถูกลบออก:

// Script อันตราย - จะถูกลบ
{ content: "<script>alert('xss')</script><p>เนื้อหาปลอดภัย</p>" }

// ผลลัพธ์: <p>เนื้อหาปลอดภัย</p>

4. Tags ที่อนุญาต

TemplateManager อนุญาต HTML tags เหล่านี้:

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

แสดงบทความบล็อก

<article class="blog-post">
  <header>
    <h1 data-text="post.title"></h1>
    <time data-text="post.publishedAt | date:'D MMMM YYYY'"></time>
  </header>

  <div class="content" data-html="post.body"></div>

  <footer>
    <span>โดย: </span>
    <span data-text="post.author.name"></span>
  </footer>
</article>

คำอธิบายสินค้า

<div class="product-description">
  <h3>รายละเอียด</h3>
  <div data-html="product.description"></div>

  <h3>คุณสมบัติ</h3>
  <div data-html="product.features"></div>
</div>

เนื้อหาจากผู้ใช้

<div class="comment">
  <div class="author" data-text="comment.author"></div>
  <div class="body" data-html="comment.content"></div>
  <time data-text="comment.date | date:'relative'"></time>
</div>

API อ้างอิง

Expression Syntax

การตั้งค่าความปลอดภัย

TemplateManager.config.security = {
  sanitize: true,           // เปิด sanitization
  validateMarkup: true,     // ตรวจสอบโครงสร้าง HTML
  allowedTags: [...],       // Whitelist ของ tags ที่อนุญาต
  allowedAttributes: {...}  // Whitelist ของ attributes ที่อนุญาต
}

ข้อควรระวัง

⚠️ 1. อย่าใช้กับข้อความธรรมดา

<!-- ❌ เกินความจำเป็นสำหรับข้อความธรรมดา -->
<span data-html="user.name"></span>

<!-- ✅ ใช้ data-text สำหรับข้อความธรรมดา -->
<span data-text="user.name"></span>

⚠️ 2. ช่องโหว่ XSS

// ❌ อย่าเชื่อ input จากผู้ใช้โดยไม่ sanitize
const userInput = '<script>stealCookies()</script>';

// ✅ TemplateManager sanitize โดยค่าเริ่มต้น
// แต่ยังต้อง validate ที่ฝั่ง server ด้วย!

⚠️ 3. ประสิทธิภาพกับเนื้อหาใหญ่

<!-- ❌ อาจช้ากับ HTML ขนาดใหญ่มาก -->
<div data-html="massiveContent"></div>

<!-- ✅ พิจารณาใช้ pagination หรือ lazy loading -->
<div data-html="currentPageContent"></div>

เปรียบเทียบ: data-text vs data-html

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

• data-text - สำหรับแสดงข้อความธรรมดา
• data-if - สำหรับแสดงแบบมีเงื่อนไข
• data-for - สำหรับวนลูปแสดงรายการ