Skip to main content

Text Attribute

Add Markdown or React files to src/pages to create a standalone page:

The $text attribute is a powerful feature of this framework that allows you to dynamically bind and update text content in your HTML elements based on JavaScript expressions.

Basic Usage

  • Add the $text attribute to any HTML element where you want to display dynamic content.
  • Set the value of $text to a string that can contain JavaScript expressions enclosed in curly braces {}.

Example​

~index.html
<p $text="Hello, {name}!"></p>

How it Works

  • The framework scans the document for elements with the $text attribute.
  • It evaluates the expressions within curly braces using JavaScript.
  • The result of the evaluation replaces the entire content of the element.
  • The framework sets up reactive bindings, so when referenced variables change, the text updates automatically.

Advanced Usage

Using Multiple Expressions​

You can use multiple expressions within a single $text attribute:

~index.html
<p $text="Welcome, {firstName} {lastName}"></p>

Using JavaScript Operations

You can perform JavaScript operations within the curly braces:

~index.html
<p $text="Total: ${price * quantity}"></p>

Accessing Framework Variables

The expressions have access to variables and methods defined in the framework's data object (usually represented by $):

~index.html
<p $text="Current count: {$.count}"></p>

Error Handling

If an error occurs while evaluating an expression, the framework will log an error to the console and display an empty string in place of the failed expression.

Reactivity

The $text attribute is reactive. This means:

  • When you update a variable used in a $text expression, all elements using that variable will automatically update.
  • You don't need to manually update the DOM; the framework handles this for you.
warning

Limitations​

  • The $text attribute replaces the entire content of an element. It cannot be used for partial text updates within an element.
  • Complex logic should be handled in your JavaScript code rather than within $text expressions.