data-container

ภาพรวม

data-container โหลดและแสดงผล components หรือ templates แบบ dynamic ตามค่าข้อมูล ทำให้สามารถสลับ component และ lazy loading ได้

ใช้เมื่อ:

• สลับ views แบบ dynamic (tabs, wizards)
• Lazy load เนื้อหาตามต้องการ
• Component-based routing ภายในหน้า

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

• ✅ Dynamic template loading
• ✅ ส่ง component context ได้
• ✅ อัพเดทแบบ reactive
• ✅ รองรับทั้ง path strings และ component objects

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

โหลด Template จาก Path

<div data-container="currentView"></div>

กับข้อมูล:

{ currentView: "views/dashboard.html" }

ผลลัพธ์: โหลดและแสดงผล views/dashboard.html ภายใน div

Syntax

<element data-container="expression">

ฟีเจอร์

1. String Path Loading

<div data-container="templatePath"></div>

{
  templatePath: "components/profile.html"
}

2. Dynamic Path Switching

<div class="tab-content" data-container="'tabs/' + activeTab + '.html'"></div>

{
  activeTab: "settings" // โหลด "tabs/settings.html"
}

3. Component Object

<div data-container="activeComponent"></div>

{
  activeComponent: {
    template: "<h1>สวัสดี {{name}}</h1>",
    state: {
      name: "ผู้ใช้"
    }
  }
}

4. กับ Parent State

<div data-container="viewConfig"></div>

{
  viewConfig: {
    template: "views/user-card.html"
  },
  user: {
    name: "สมชาย"
  }
  // Parent state (user) สามารถเข้าถึงได้ใน loaded template
}

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

Tab Navigation

<div class="tabs">
  <button data-on="click:setTab('overview')"
          data-class="active:activeTab === 'overview'">ภาพรวม</button>
  <button data-on="click:setTab('settings')"
          data-class="active:activeTab === 'settings'">การตั้งค่า</button>
  <button data-on="click:setTab('history')"
          data-class="active:activeTab === 'history'">ประวัติ</button>
</div>

<div class="tab-content" data-container="'tabs/' + activeTab + '.html'">
</div>

{
  activeTab: "overview"
}

function setTab(tab) {
  this.activeTab = tab;
}

Wizard Steps

<div class="wizard">
  <div class="steps">
    <span data-class="active:currentStep === 1">1. ข้อมูล</span>
    <span data-class="active:currentStep === 2">2. ชำระเงิน</span>
    <span data-class="active:currentStep === 3">3. ยืนยัน</span>
  </div>

  <div class="step-content" data-container="'wizard/step-' + currentStep + '.html'">
  </div>

  <div class="navigation">
    <button data-on="click:prevStep" data-if="currentStep > 1">ย้อนกลับ</button>
    <button data-on="click:nextStep" data-if="currentStep < 3">ถัดไป</button>
    <button data-on="click:submit" data-if="currentStep === 3">ส่ง</button>
  </div>
</div>

Dynamic Component ตาม Type

<div data-for="widget in dashboardWidgets">
  <template>
    <div class="widget">
      <h3 data-text="widget.title"></h3>
      <div data-container="'widgets/' + widget.type + '.html'"></div>
    </div>
  </template>
</div>

{
  dashboardWidgets: [
    { title: "สถิติ", type: "stats" },
    { title: "กราฟ", type: "chart" },
    { title: "กิจกรรมล่าสุด", type: "activity" }
  ]
}

Modal Content

<div class="modal" data-if="isModalOpen">
  <div class="modal-backdrop" data-on="click:closeModal"></div>
  <div class="modal-content">
    <button class="close" data-on="click:closeModal">×</button>
    <div data-container="modalContent"></div>
  </div>
</div>

function openUserModal(userId) {
  this.modalContent = `modals/user-detail.html`;
  this.selectedUserId = userId;
  this.isModalOpen = true;
}

API อ้างอิง

Expression Types

Component Object Properties

ข้อควรระวัง

⚠️ 1. Template Path ไม่ถูกต้อง

// ❌ ผิด - path ไม่มีอยู่
{ currentView: "nonexistent.html" }

// ✅ ตรวจสอบว่า template มีอยู่
{ currentView: "views/existing.html" }

⚠️ 2. ขาด Template Property

// ❌ ผิด - ไม่มี template
{ component: { state: { name: "สมชาย" } } }

// ✅ ถูก - มี template
{ component: {
  template: "<p>สวัสดี {{name}}</p>",
  state: { name: "สมชาย" }
}}

⚠️ 3. ค่า Null หรือ Undefined

<!-- ไม่ render อะไรถ้า currentView เป็น null -->
<div data-container="currentView"></div>

// ✅ ให้ค่าเริ่มต้นหรือตรวจสอบก่อน render
{ currentView: initialView || "views/default.html" }

⚠️ 4. ความปลอดภัย: Path Traversal

// ❌ ปัญหาความปลอดภัยที่อาจเกิด - path จากผู้ใช้
{ viewPath: userInput }

// ✅ Validate หรือใช้ whitelist
const allowedViews = ['home', 'about', 'contact'];
{ viewPath: allowedViews.includes(userInput) ? `views/${userInput}.html` : 'views/home.html' }

การจัดการ Error

เมื่อโหลดล้มเหลว จะ render error:

<div class="template-error">
  <p>ไม่สามารถโหลด template ได้</p>
</div>

ตรวจสอบ console สำหรับ error messages โดยละเอียด

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

• data-if - สำหรับแสดง container แบบมีเงื่อนไข
• data-for - สำหรับหลาย containers
• data-script - สำหรับ initialization หลังโหลด