Skip to content

ht-hide.md

Latest commit

 

History

History
45 lines (38 loc) · 2.19 KB

ht-hide.md

File metadata and controls

45 lines (38 loc) · 2.19 KB
Raw

ht-hide

The ht-hide attribute in the HTMT (HyperText Markup Templating) system allows developers to dynamically hide HTML elements based on the evaluation of JSONPath expressions. This feature is crucial for creating responsive and interactive web interfaces where the visibility of elements depends on specific conditions in the data model.

Syntax

The ht-hide attribute can be added to any HTML element. The value of this attribute is a JSONPath expression that evaluates to a boolean. If the expression evaluates to true, the element is hidden; otherwise, it remains visible.

<div ht-hide="expression"></div>
  • expression: A JSONPath expression that determines whether the element should be hidden.

Examples

Basic Usage

Hiding an element if a user is not logged in:

<div ht-hide="$.user.isLoggedIn">
    This content is only visible if the user is not logged in.
</div>

Complex Conditions

Using a more complex condition, such as hiding an element if a user's account is expired:

<div ht-hide="$.user.accountStatus == 'expired'">
    Your account is active.
</div>

Best Practices

  • Clarity and Maintainability: Write clear and straightforward JSONPath expressions to ensure that the logic behind visibility is easy to understand and maintain.
  • Data Binding: Ensure that any data used in ht-hide expressions is correctly bound and updated in your data model to reflect changes in real-time.
  • Fallback Content: Consider providing fallback content or alternative views for hidden elements, especially in applications where user interaction can change visibility states frequently.

Compatibility

ht-hide is implemented through JavaScript and relies on the evaluation of JSONPath expressions. It should be compatible with all modern browsers that support ECMAScript 2015 (ES6) and later. Make sure that your implementation degrades gracefully in environments where JavaScript is disabled.

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.