Skip to content

ht-template.md

Latest commit

 

History

History
49 lines (43 loc) · 2.38 KB

ht-template.md

File metadata and controls

49 lines (43 loc) · 2.38 KB
Raw

ht-template

The ht-template attribute in the HTMT (HyperText Markup Templating) system is used to define reusable content blocks that can be instantiated multiple times within your application. This attribute allows developers to define a template once and use it in various contexts, significantly reducing code redundancy and enhancing maintainability.

Syntax

The ht-template attribute is typically placed on a tag, which is a standard HTML5 element used to hold client-side content that you don't want to be rendered until instantiated via JavaScript. 

<template ht-template="template-id">
    <!-- Template content here -->
</template>
  • template-id: A unique identifier for the template, used when referencing and rendering this template elsewhere in your application.

Examples

Defining a Template

Create a template for displaying user information, which can be reused wherever needed:

<template ht-template="user-info">
    <div>
        <h2 ht-bind="$.name">Name Placeholder</h2>
        <p ht-bind="$.email">Email Placeholder</p>
    </div>
</template>

Using a Template within a Loop

Use the user-info template within a loop to render information for each user in a list:

<div ht-loop="$.users[*]" ht-template="user-info">
    <!-- Each user's information will be rendered using the 'user-info' template -->
</div>

Best Practices

  • Template Identification: Always use unique identifiers for your templates to avoid conflicts, especially in large applications with many templates.
  • Modularity: Design templates to be as modular as possible, encapsulating functionality that makes them useful in various parts of your application without modification.
  • Accessibility: Ensure that templates are accessible, especially when they contain interactive elements or complex structures.

Compatibility

ht-template uses the standard HTML <template> element, which is supported in all modern browsers. However, ensure your templating logic in JavaScript correctly handles instantiation and data binding for these templates, especially in older browsers or non-standard environments.

License

This document is part of the HTMT project, which is open source and freely available under the MIT License. For full details, see the LICENSE file and the main README for project details and contribution guidelines.