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 settingindex-propertyattribute$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>
<nav>
<button rv-on-click="push">Push</button>
<button rv-on-click="pop">Pop</button>
<button rv-on-click="shift">Shift</button>
<button rv-on-click="unshift">Unshift</button>
<button rv-on-click="splice">Splice</button>
<button rv-on-click="sort">Sort</button>
<button rv-on-click="reset">Reset</button>
</nav>
<section>
<div rv-each-item="items">
<div>Item { %item% } / { item.name }</div>
</div>
</section>
import { Component } from '@ribajs/core';
import template from './each-item-example.component.html';
export class EachItemExampleComponent extends Component {
public static tagName: string = 'rv-each-item-example';
protected scope: Scope = {
items: this.getItems(),
pop: this.pop,
push: this.push,
reset: this.reset,
shift: this.shift,
sort: this.sort,
splice: this.splice,
unshift: this.unshift,
};
constructor(element?: HTMLElement) {
super(element);
}
public push() {
this.scope.items.push({name: 'pushed'});
}
public pop() {
this.scope.items.pop();
}
public shift() {
this.scope.items.shift();
}
public unshift() {
this.scope.items.unshift({name: 'shifted'});
}
public splice() {
this.scope.items.splice(1, 1, {name: 'spliced1'}, {name: 'spliced2'});
}
public reset() {
this.scope.items = this.getItems();
}
public sort() {
this.scope.items.sort((a, b) => {
return (a.value || 0) - (b.value || 0);
});
}
protected connectedCallback() {
super.connectedCallback();
this.init([]);
}
protected getItems(): Item[] {
return [{name: 'x', value: 2}, {name: 'y', value: 1}, {name: 'z', value: 3}];
}
protected async init(observedAttributes: string[]) {
return super.init(observedAttributes)
.then((view) => {
return view;
});
}
protected template() {
return template;
}
}
interface Item {
name: string;
value?: number;
}
interface Scope {
items: Item[];
push: EachItemExampleComponent['push'];
pop: EachItemExampleComponent['pop'];
shift: EachItemExampleComponent['shift'];
unshift: EachItemExampleComponent['unshift'];
splice: EachItemExampleComponent['splice'];
reset: EachItemExampleComponent['reset'];
sort: EachItemExampleComponent['sort'];
}
<!DOCTYPE html>
<html>
<head>
<title>each-star-example</title>
</head>
<body>
<div id="rv-app">
<rv-each-item-example></rv-each-item-example>
</div>
</body>
</html>
each-item-example
git clone --recurse-submodules https://github.com/ribajs/riba.git
cd riba/examples/each-item
npm install
npm run start
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">