Lightweight and powerful data binding + templating solution for building modern web applications.
The espiritual sucessor of Rivets.js rewritten in TypeScript.
$ npm install -g @ribajs/cli
$ riba new projectWhy Riba.js?
Flexible
Riba.js is completely agnostic about your model / controller layer and works well with existing libraries that employ an event-driven model such as Backbone.js and Stapes.js. It also ships with built-in support for plain JavaScript objects, so you can use Riba.js right away without needing a separate model or observables library.
Configurable
From the event handlers to the template delimiters, the attribute prefixes to the preloading of data. It's all configurable and tunable at the application level as well as locally to individual views.
Highlights
Binders
<input rv-value="item.summary">
Describe how your underlying data is reflected in the DOM and vice-versa. All binders create a binding that is automatically updated when model data changes or when the user interacts with the DOM.
Formatters
<span>{ item.due | fromNow | duration }</span>
Format dates, numbers, currencies and implement logic gates and conversions. Formatters work in a similar fashion to the Unix pipeline, so you can stack as many of them together as you like.
Adapters
<select rv-value="user.address:city">
Riba.js includes a built-in . adapter for plain JavaScript objects.
Custom adapters are supported for advanced integrations with external state
models. Most apps only need the default adapter.
Web Components
<toggle-item on="item.complete"></toggle-item>
Define reusable views, instantiable as a custom element. Each web component gets its own isolated, augmentable scope and are based on the custom elements browser standard.
Example
<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, ScopeBase } from "@ribajs/core";
export class EachItemExampleComponent extends Component {
public static tagName = "rv-each-item-example";
public 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() {
super();
}
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 async template() {
const { default: template } =
await import("./each-item-example.component.html?raw");
return template;
}
}
interface Item {
name: string;
value?: number;
}
interface Scope extends ScopeBase {
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>
<link rel="stylesheet" href="./scss/main.scss">
</head>
<body>
<div id="rv-app">
<rv-each-item-example></rv-each-item-example>
</div>
<script type="module" src="./ts/main.ts"></script>
</body>
</html>
core-each-item Demo
Demonstriert den rv-each-item-Binder anhand einer reaktiven Liste, die per Buttons mit allen Standard-Array-Methoden (push, pop, shift, unshift, splice, sort, reset) manipuliert werden kann. Jede Zustandsänderung wird sofort im DOM gespiegelt.
Starten
git clone --recurse-submodules https://github.com/ribajs/riba.git
cd riba/demos/core-each-item
yarn install
yarn start