Το Ractive.js είναι μια βιβλιοθήκη διεπαφής χρήστη που βασίζεται σε πρότυπα και προσφέρει αμφίδρομη δέσμευση δεδομένων στο DOM.
Εκκίνηση
const ractive = new Ractive({
target: '#app',
template: '#my-template',
data: {
greeting: 'Hello',
user: { name: 'Alice' },
count: 0
}
});
Σύνταξη Προτύπου (Mustache)
<!-- Έξοδος δεδομένων -->
<h1>{{greeting}}, {{user.name}}!</h1>
<!-- Έξοδος ακατέργαστου HTML -->
<div>{{{unescapedHtml}}}</div>
<!-- Αμφίδρομη σύνδεση εισόδου -->
<input value="{{user.name}}" />
<!-- Συνθήκες -->
{{#if count > 0}}
<p>Στοιχεία στο καλάθι: {{count}}</p>
{{else}}
<p>Το καλάθι σας είναι άδειο.</p>
{{/if}}
<!-- Επανάληψη λίστας -->
<ul>
{{#each items:i}}
<li>{{i + 1}}: {{this.name}}</li>
{{/each}}
</ul>
Μέθοδοι Στιγμιοτύπου
// Ανάγνωση και εγγραφή αντιδραστικών δεδομένων
ractive.get('user.name'); // => "Alice"
ractive.set('user.name', 'Bob'); // Updates DOM immediately
// Βοηθητικές συναρτήσεις αριθμών
ractive.add('count', 1);
ractive.subtract('count', 1);
// Εναλλαγή δυαδικής τιμής
ractive.toggle('isVisible');
// Παρακολούθηση αλλαγών
ractive.observe('user.name', (newValue, oldValue) => {
console.log(`Το όνομα άλλαξε σε ${newValue}`);
});
Χειρισμός Συμβάντων
<button on-click="@this.fire('submitForm', user)">Υποβολή</button>
ractive.on('submitForm', (event, user) => {
console.log('Υποβληθείς χρήστης:', user);
});