text

Sets the element's text content.

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

You can also bind text using interpolation.

<p>{ user.name } is { user.age } years old.</p>

html

Sets the element's HTML content.

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

show

Shows the element when the value evaluates to true and hides the element when the value evaluates to false.

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

hide

Hides the element when the value evaluates to true and shows the element when the value evaluates to false.

<section rv-hide="feature.disabled"></section>

enabled

Enables the element when the value evaluates to true and disables the element when the value evaluates to false.

<button rv-enabled="user.canVote">Upvote</button>

disabled

Disables the element when the value evaluates to true and enables the element when the value evaluates to false.

<button rv-disabled="user.suspended">Upvote</button>

if

Inserts and binds the element as well as it's child nodes into the DOM when the value evaluates to true and removes / unbinds the element when the value evaluates to false.

<section rv-if="item.editable"></section>

value

Sets the element's value when the attribute changes and sets the bound object's value when the input element changes from user input (two-way).

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

checked

Checks the input when the value evaluates to true and unchecks the input when the value evaluates to false. This also sets the bound object's value to true/false when the user checks/unchecks the input (two-way).

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

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

on-[event]

Binds an event listener on the element using the event specified in [event] and the bound object (should return a function) as the callback.

If the end value of the binding changes to a different function, this binder will automatically unbind the old callback and bind a new listener to the new function.

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

each-[item]

Appends a new instance of the element in place for each item in an array. Each element is bound to a new view created in a scope with three special properties:

• the current iterated item in the array, named whatever value is in place of [item]
• $index: the current iterated item index. Can be configured by setting index-property attribute
• $parent: the parent scope, if any

Also note that you may bind to the iterated item directly on the parent element which contains the actual rv-each declaration.

<ul>
  <li rv-each-todo="todos" rv-data-id="todo.id">
    <input type="checkbox" rv-checked="todo.done"> { $index } - { todo.name }
  </li>
<ul>

Nested rv-each

By nesting elements bound by rv-each, a scope is created for each nest level. The variables from parent scopes can be acessed by child ones, using a resolution algorithm similar to JavaScript prototype chain, i.e., looks for current scope if not found, look in parent scope repeating until find.

<ul>
  <li rv-each-categories="categories">
    { category.name }
    <ul>
      <li rv-each-todo="category.todos">
        <input type="checkbox" rv-checked="todo.done" rv-data-category-id="category.id"> { $index } - { todo.name }
      </li>
    <ul>
  </li>
<ul>

A more complex example can be found here

class-[classname]

Adds a class (whatever value is in place of [classname]) on the element when the value evaluates to true and removes that class if the value evaluates to false.

<li rv-class-completed="todo.done">{ todo.name }</li>

[attribute]

Sets the value of an attribute (whatever value is in place of [attribute]) on the element.

If your binding declaration does not match any of the above routines, it will fallback to use this binding.

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