Directives Reference

SenangStart Actions uses HTML attributes prefixed with ss- to add reactive behavior to elements.

Core Directives

Directive	Description
ss-data	Define reactive data scope
ss-text	Bind text content
ss-show	Toggle visibility
ss-if	Conditional rendering
ss-for	List rendering

Form & Binding

Directive	Description
ss-model	Two-way data binding
ss-bind	Attribute binding
ss-on	Event handling

Utilities

Directive	Description
ss-ref	Element references
ss-effect	Side effects
ss-transition	CSS transitions
ss-cloak	Hide until ready

Quick Examples

Counter

<div ss-data="{ count: 0 }">
  <button ss-on:click="count--">-</button>
  <span ss-text="count"></span>
  <button ss-on:click="count++">+</button>
</div>

Toggle

<div ss-data="{ open: false }">
  <button ss-on:click="open = !open" ss-text="open ? 'Hide' : 'Show'"></button>
  <div ss-show="open" ss-transition>Hidden content</div>
</div>

List

<div ss-data="{ items: ['A', 'B', 'C'] }">
  <template ss-for="item in items">
    <div ss-text="item"></div>
  </template>
</div>

Form

<div ss-data="{ name: '' }">
  <input ss-model="name" placeholder="Enter name">
  <p ss-text="'Hello, ' + (name || 'stranger')"></p>
</div>

Properties

For special properties like $refs, $store, $el, $event, and $dispatch, see the Properties section.