data-container

Overview

data-container dynamically loads and renders components or templates based on data values. It enables dynamic component switching and lazy loading.

When to use:

• Dynamic view switching (tabs, wizards)
• Lazy load content on demand
• Component-based routing within a page

Why use it:

• ✅ Dynamic template loading
• ✅ Component context passing
• ✅ Reactive updates
• ✅ Supports both path strings and component objects

Basic Usage

Load Template by Path

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

With data:

{ currentView: "views/dashboard.html" }

Result: Loads and renders views/dashboard.html inside the div.

Syntax

<element data-container="expression">

Features

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" // Loads "tabs/settings.html"
}

3. Component Object

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

{
  activeComponent: {
    template: "<h1>Hello {{name}}</h1>",
    state: {
      name: "World"
    }
  }
}

4. With Parent State

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

{
  viewConfig: {
    template: "views/user-card.html"
  },
  user: {
    name: "John"
  }
  // Parent state (user) is accessible in loaded template
}

Advanced Examples

Tab Navigation

<div class="tabs">
  <button data-on="click:setTab('overview')"
          data-class="active:activeTab === 'overview'">Overview</button>
  <button data-on="click:setTab('settings')"
          data-class="active:activeTab === 'settings'">Settings</button>
  <button data-on="click:setTab('history')"
          data-class="active:activeTab === 'history'">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. Info</span>
    <span data-class="active:currentStep === 2">2. Payment</span>
    <span data-class="active:currentStep === 3">3. Confirm</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">Back</button>
    <button data-on="click:nextStep" data-if="currentStep < 3">Next</button>
    <button data-on="click:submit" data-if="currentStep === 3">Submit</button>
  </div>
</div>

Dynamic Component Based on 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: "Statistics", type: "stats" },
    { title: "Chart", type: "chart" },
    { title: "Recent Activity", 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;
}

Inline Template Component

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

{
  infoBox: {
    template: `
      <div class="info-box">
        <h4 data-text="title"></h4>
        <p data-text="message"></p>
      </div>
    `,
    state: {
      title: "Notice",
      message: "This is an important message."
    }
  }
}

API Reference

Expression Types

Component Object Properties

Template Loading

Templates are loaded via TemplateManager.loadFromServer():

• Validates path security
• Applies content sanitization
• Caches templates for performance

Common Pitfalls

⚠️ 1. Invalid Template Path

// ❌ Wrong - path doesn't exist
{ currentView: "nonexistent.html" }

// ✅ Ensure template exists
{ currentView: "views/existing.html" }

⚠️ 2. Missing Template Property

// ❌ Wrong - missing template
{ component: { state: { name: "John" } } }

// ✅ Correct - include template
{ component: {
  template: "<p>Hello {{name}}</p>",
  state: { name: "John" }
}}

⚠️ 3. Null or Undefined Value

<!-- Won't render anything if currentView is null -->
<div data-container="currentView"></div>

// ✅ Provide default or check before rendering
{ currentView: initialView || "views/default.html" }

⚠️ 4. Security: Path Traversal

// ❌ Potential security issue - user controlled path
{ viewPath: userInput }

// ✅ Validate or use whitelist
const allowedViews = ['home', 'about', 'contact'];
{ viewPath: allowedViews.includes(userInput) ? `views/${userInput}.html` : 'views/home.html' }

Error Handling

When load fails, an error is rendered:

<div class="template-error">
  <p>Failed to load template</p>
</div>

Check console for detailed error messages.

Related Directives

• data-if - For conditional container display
• data-for - For multiple containers
• data-script - For initialization after load