Core Binders

A brief rundown on the core binders included with Rivets.js.

text

Sets the element's text when an observed attribute changes.

<h1 rv-text="item.name"></h1>

Or by using text content interpolation.

<h1>{ item.name }</h1>

html

Sets the element's HTML content when an observed attribute changes.

<section rv-html="item.summary"></section>

value

Sets the element's value when the attribute changes and sets the object's attribute value when the input element changes (bi-directional).

<input rv-value="item.name">

show/hide

Shows or hides the element when the attribute changes (based on the incoming value's truthy/falsey evaluation).

<button rv-show="user.admin">Remove</button>

enabled/disabled

Enables or disables the element when the attribute changes (based on the incoming value's truthy/falsey evaluation).

<button rv-enabled="user.editor">Highlight</button>

checked/unchecked

Checks or unchecks the element when the attribute changes (based on the incoming value's truthy/falsey evaluation). Also sets the object's attribute value to true/false when the element changes (bi-directional).

Use this instead of value when binding to checkboxes or radio buttons.

<input type="checkbox" rv-checked="item.enabled">

on-[event]

Binds a function to the [event] event on the element. Will also unbind/bind when the attribute changes if going through the adapter.

<button rv-on-click="item.destroy">Remove</button>

<span rv-on-hover="item.showPreview">Preview</span>

each-[item]

Loops over items in an array and appends bound instances of that element in place. A new context is available on that element and it's children for the iterated [item], which you can also bind to.

Note that all contexts available in the parent binding are still available in the iterated context as well.

<ul>
  <li rv-each-todo="list.todos">
    <input type="checkbox" rv-checked="todo.done">
    { todo.summary }
  </li>
<ul>

class-[classname]

Adds or removes the [classname] class on the element when the attribute changes (based on the incoming value's truthy/falsey evaluation).

<li rv-class-enabled="item.enabled">{ item.name }</li>

[attribute]

If your binding declaration does not match any of the above routines, it will fallback to use this binding. This binding simply sets the value for the specified [attribute].

<input type="text" rv-placeholder="field.placeholder">

<li rv-id="item.id">{ item.title }</li>