- \n
- \n {item.name} - ${item.price}\n \n
\n {index + 1}. {user.name} ({user.email})\n
\n\n\n\n ![]()
\n {photo.caption}\n
\n```\n\nThe `s-key` attribute tells SensibleJS how to identify each item (e.g., `s-key=\"item.id\"`). When items change, only affected elements are updated. Without `s-key`, the index is used.\n\n### `s-css` — Dynamic Styling\n\nBind CSS properties to variables or expressions.\n\n```html\n\n\n Styled content\n
\n\n\n= 50 ? 'green' : 'red'}\">\n {score}%\n
\n\n\n\n Progress bar\n
\n```\n\n### `s-class` — Conditional CSS Classes\n\nToggle CSS classes based on expressions. Uses semicolon-separated `class: expression` pairs.\n\n```html\n\n 5; invalid-border: email.length <= 5\">\n\n\n 90; dimmed: !isVisible\">\n Content\n
\n```\n\n### `s-attr` — Dynamic HTML Attributes\n\nSet or remove HTML attributes based on expressions. If the expression evaluates to `false`, `null`, or `undefined`, the attribute is removed. `true` sets an empty attribute (e.g., `disabled`). Any other value sets the attribute to that value.\n\n```html\n\n\n\n\nLink\n\n\nPanel
\n```\n\n### `s-on` — General Event Binding\n\nBind any DOM event with optional modifiers. Format: `event.modifier: expression`. Multiple bindings separated by semicolons.\n\n**Modifiers:**\n| Modifier | Effect |\n| --- | --- |\n| `.prevent` | Calls `event.preventDefault()` |\n| `.stop` | Calls `event.stopPropagation()` |\n| `.enter` | Only fires on Enter key |\n| `.escape` | Only fires on Escape key |\n\n```html\n\n\n\n\n\n