TemplateManager - คู่มืออ้างอิง Directives

ภาพรวม

TemplateManager เป็น template engine หลักของ Now.js Framework ที่มอบความสามารถในการ data-binding และ reactive rendering ผ่าน HTML data attributes

ความสามารถหลัก:

• 🔗 Data Binding - เชื่อมข้อมูลกับ text, attributes และ classes
• 🔄 Reactive Updates - อัพเดท UI อัตโนมัติเมื่อข้อมูลเปลี่ยน
• 📋 List Rendering - แสดงผลรายการด้วย data-for
• 🎯 Event Handling - จัดการ events แบบ declarative พร้อม modifiers
• 🧩 Dynamic Components - โหลด components ตามต้องการ

อ้างอิงด่วน

Data Binding Directives

Control Flow Directives

Form & Input Directives

Data Rebinding Directives

Event & Component Directives

Animation Directives

Syntax การเข้าถึงข้อมูล

การเข้าถึงข้อมูลพื้นฐาน

<!-- property ธรรมดา -->
<span data-text="username"></span>

<!-- property แบบซ้อน -->
<span data-text="user.profile.name"></span>

<!-- เข้าถึง array -->
<span data-text="items[0].name"></span>

กับ Context Variables

<!-- ใน data-for loops -->
<div data-for="item in items">
  <span data-text="item.name"></span>
  <span data-text="index"></span>
</div>

Template Interpolation

<!-- inline expressions -->
<p>สวัสดี {{ user.name }}!</p>
<p>รวม: {{ cart.items.length }} รายการ</p>

รูปแบบการใช้งานที่พบบ่อย

แสดงข้อมูลผู้ใช้

<div class="user-card">
  <h2 data-text="user.name"></h2>
  <p data-text="user.email"></p>
  <img data-attr="src:user.avatar, alt:user.name">
</div>

แสดงผลแบบมีเงื่อนไข

<div data-if="user.isLoggedIn">
  <p>ยินดีต้อนรับ <span data-text="user.name"></span>!</p>
</div>

<div data-if="!user.isLoggedIn">
  <a href="/login">กรุณาเข้าสู่ระบบ</a>
</div>

รายการแบบ Dynamic

<ul data-for="item in menuItems">
  <template>
    <li>
      <a data-attr="href:item.url" data-text="item.label"></a>
    </li>
  </template>
</ul>

Form Binding

<form data-form="contact">
  <input type="text" data-model="form.name" placeholder="ชื่อ">
  <input type="email" data-model="form.email" placeholder="อีเมล">
  <textarea data-model="form.message"></textarea>
  <button data-on="click:submitForm">ส่ง</button>
</form>

เอกสารฉบับละเอียด

สำหรับเอกสารฉบับสมบูรณ์ของแต่ละ directive ดูที่:

• แนวคิดหลัก - สถาปัตยกรรมและการเริ่มต้น
• data-text - Text binding พร้อม formatters
• data-html - HTML rendering และ sanitization
• data-attr - Attribute binding
• data-class - โหมดการ binding classes
• data-style - Style binding
• data-if - Conditional rendering
• data-for - List rendering
• data-on - Event handling
• data-model - Two-way binding
• data-checked - Checkbox/radio binding
• data-options-key - เติม options แบบ declarative
• data-bind - ผูกข้อมูลซับซ้อนเข้ากับตารางที่ framework จัดการอยู่
• data-files - แสดงไฟล์เดิมสำหรับ file input
• data-container - Dynamic components
• data-script - Script initialization
• data-on-load - hook หลัง render เสร็จ
• data-animation - animation directives แบบ declarative

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

• RouterManager - จัดการ routes
• FormManager - ประมวลผลฟอร์ม
• ComponentManager - ระบบ components