Core Module - Binders

add-class

Adds the value of the attribute to the class. Instead of class-[classname] the classname is setted by the attribute value and not by the star value.

<ul>
  <li rv-each-todo="todos">
    <div rv-add-class="todo.state"></div>
  </li>
<ul>

remove-class

Removes the given class string the class attibute. Instead of class-[classname] the classname is removed by the given attribute and not by the star value.

<img class="loading" rv-src="img.src" rv-remove-class="loadingClass">

assign

Assign a value in your model. The value you want to assign must be an object and will be concatenate with your model. You can also pass a JSON string.

assign-[property]

Assign a value in your model, sets or overwrites a value by his property name (named whatever value is in place of [property]) in your model.

[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">

block

Blocks the binding for the current element and his childs.

Please note that script, style, template and code tags are blocked by default. You can change this by setting the blockNodeNames option.

<div rv-block="">
  <!--
    After binding you will see `{ value }`
    (instead of the content of value)
    because the binding is blocked here
  -->
  { value }
</div>

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">

unchecked

Unchecks the input when the value evaluates to true and checks the input when the value evaluates to false. This also sets the bound object's value to false/true 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-unchecked="item.disabled">

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>

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>

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>

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]
  • %[item]%: 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"> { %todo% } - { todo.name }
  </li>
<ul>

Nested each-[item]

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-category="categories">
    { category.name }
    <ul>
      <li rv-each-todo="category.todos">
        <input
          type="checkbox"
          rv-checked="todo.done"
          rv-data-category-id="category.id">
          { %category% } - { %todo% } - { todo.name }
      </li>
    <ul>
  </li>
<ul>

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>

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>

html

Sets the element's HTML content.

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

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>

template

Sets the element's HTML content like rv-html, but also binds the HTML content so you can also use binders and componentes in such html templates.

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>

unless

Removes and unbinds the element as well as it's child nodes when the value evaluates to true and inserts / binds the element when the value evaluates to false.

<section rv-unless="item.locked"></section>

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="destroy | args item">Remove</button>

srcset-[size]

Sets an url with size to the srcset attribute

style-property

Adds a style to the element.

<div rv-style-background-color="'blue'"></div>

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">