Ractive.js is een template-gestuurde UI-bibliotheek die tweerichtingsdatabinding en reactiviteit naar de DOM brengt.
Initialisatie
const ractive = new Ractive({
target: '#app',
template: '#my-template',
data: {
greeting: 'Hello',
user: { name: 'Alice' },
count: 0
}
});
Template-syntaxis (Mustache)
<!-- Gegevensuitvoer -->
<h1>{{greeting}}, {{user.name}}!</h1>
<!-- Ruwe HTML-uitvoer -->
<div>{{{unescapedHtml}}}</div>
<!-- Tweerichtings-invoerbinding -->
<input value="{{user.name}}" />
<!-- Voorwaarden -->
{{#if count > 0}}
<p>Artikelen in winkelwagen: {{count}}</p>
{{else}}
<p>Uw winkelwagen is leeg.</p>
{{/if}}
<!-- Lijst-iteratie -->
<ul>
{{#each items:i}}
<li>{{i + 1}}: {{this.name}}</li>
{{/each}}
</ul>
Instantie-methoden
// Reactieve gegevens lezen en schrijven
ractive.get('user.name'); // => "Alice"
ractive.set('user.name', 'Bob'); // Updates DOM immediately
// Nummer-helpers
ractive.add('count', 1);
ractive.subtract('count', 1);
// Booleaanse waarde wisselen
ractive.toggle('isVisible');
// Wijzigingen observeren
ractive.observe('user.name', (newValue, oldValue) => {
console.log(`Naam gewijzigd in ${newValue}`);
});
Gebeurtenisafhandeling
<button on-click="@this.fire('submitForm', user)">Versturen</button>
ractive.on('submitForm', (event, user) => {
console.log('Verzonden gebruiker:', user);
});