s-bind

s-bind sets an attribute from an expression and keeps it in sync as the data behind that expression changes. The shorthand is :, which is what you will normally write.

<div s-data="{ label: 'Save changes' }">
  <button :title="label" s-text="label"></button>
</div>

:title="label" is exactly s-bind:title="label". Whenever label changes, the attribute updates.

#Boolean attributes

For HTML boolean attributes such as disabled, checked, required, readonly, selected, open, hidden, and multiple, a truthy value adds the attribute and a falsy value removes it entirely. Summit also reflects the value to the matching DOM property, so form state stays correct.

<div s-data="{ agreed: false }">
  <label><input type="checkbox" s-model="agreed" /> I agree</label>
  <button :disabled="!agreed">Continue</button>
</div>

For a non-boolean attribute the rule is similar: false, null, and undefined remove the attribute, and every other value is set as a string.

#:class

:class merges its result with whatever is already in the static class attribute, so you never lose your base classes. The value can be a string, an object, or an array.

The object form is the common one. Each key is a class name, applied while its value is truthy.

<div s-data="{ active: true, busy: false }">
  <style>
    .tag { padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 6px; }
    .tag.active { font-weight: 700; }
    .tag.busy { opacity: .5; }
  </style>
  <span class="tag" :class="{ active: active, busy: busy }">Status</span>
  <button @click="active = !active">Toggle active</button>
</div>

The array form lists classes to apply, and its entries can themselves be strings or objects, which is handy for mixing always-on classes with conditional ones.

<span class="tag" :class="[size, { active: isActive }]"></span>

Because the static classes are always kept, put a class in class or in :class, not both, when you want to toggle it off.

#:style

:style takes an object of CSS properties and merges it onto the static style attribute. Property names may be written camelCase or kebab-case, and any entry whose value is null or false is skipped.

<div s-data="{ hue: 200 }">
  <input type="range" min="0" max="360" s-model="hue" />
  <p :style="{ color: 'hsl(' + hue + ', 70%, 45%)', fontWeight: 700 }">
    Live color at hue <span s-text="hue"></span>.
  </p>
</div>

A string value works too and is merged the same way.

#Binding an object of attributes

Given no attribute name, s-bind="obj" applies a whole object at once. Plain entries become attributes, @-prefixed keys become event listeners, and :-prefixed keys become dynamic bindings whose function is re-run reactively.

<button s-bind="{ type: 'button', ':disabled'() { return busy }, '@click'() { save() } }">
  Save
</button>

#.camel

HTML attribute names are case-insensitive, which is a problem for SVG and other camelCase attributes. The .camel modifier converts the bound name from dashes to camelCase, so :view-box.camel sets viewBox.