Attribute Binding
Dynamically bind HTML attributes to your state. PulsePoint intelligently handles string interpolation and boolean toggles.
Dynamic Values
Use curly braces to bind state variables to any standard HTML attribute.
media-card.html
<div class="card">
<!-- Bind image sources and alt text -->
<img src="{avatarUrl}" alt="{username}'s avatar" />
<!-- Bind links and targets -->
<a href="{profileLink}" target="{linkTarget}">View Profile</a>
</div>
<script type="text/pp">
const [username, setUsername] = pp.state("alex_dev");
const [avatarUrl, setAvatar] = pp.state("/img/alex.png");
const [profileLink, setLink] = pp.state("/u/alex_dev");
const [linkTarget, setTarget] = pp.state("_blank");
</script>Boolean Attributes
Attributes like disabled, checked, and hidden behave specially.
How it works: If the value evaluates to
true, the attribute is added. If it is false, null, or undefined, the attribute is completely removed from the DOM.
form-controls.html
<form>
<label>
<input type="checkbox" checked="{isSubscribed}" />
Subscribe to newsletter
</label>
<!-- Disabled when isSubmitting is true -->
<button disabled="{isSubmitting}">
{isSubmitting ? 'Saving...' : 'Save Changes'}
</button>
</form>
<script type="text/pp">
const [isSubscribed, setSub] = pp.state(true);
const [isSubmitting, setSubmitting] = pp.state(false);
</script>Conditional Classes & Styles
You can use ternary operators inside `class` or `style` attributes to toggle visual states dynamically.
alert-box.html
<div>
<!-- Toggle class string based on state -->
<div class="alert {isError ? 'alert-danger' : 'alert-success'}">
{message}
</div>
<!-- Inline style interpolation -->
<div style="color: {isActive ? 'green' : 'gray'};">
Status Indicator
</div>
</div>
<script type="text/pp">
const [isError, setIsError] = pp.state(false);
const [isActive, setIsActive] = pp.state(true);
const [message, setMessage] = pp.state("Operation successful");
</script>