ripples.js est une bibliothèque JavaScript pour la création de modèles (templates) et la liaison de données (data binding) construite par Segment.io. Elle s'articule autour de templates et a une API permettant d'ajouter des plugins aux composants.
On y retrouve des similitudes avec Reactive (observables, etc.), AngularJS, Handlebars et React (construction d'interface utilisateur). La différence majeure avec les autres bibliothèques de ce genre est qu'il n'y a aucune utilisation globale. Chaque vue a son propre ensemble de plugins et de liaisons.
Code javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | var Person = ripple('<div>{{name}}</div>') .use(events) .use(each) .use(dispatch); var person = new Person({ name: 'Tom' }); person.appendTo(document.body); |
Il y a un exemple qui utilise un modèle intégré dans un élément script et deux plugins : ripple.events et ripple.markdown. Les plugins autorisent l'observation des modifications dans une textarea et la seconde partie est configurée pour afficher le résultat à l'aide d'une directive sur un élément div.
Le modèle pour la composition de la vue permet que cette dernière soit intégrée et que les données seront toujours synchronisées lorsque la vue change.
La bibliothèque comporte par exemple :
- l'utilisation de template HTML avec les accolades comme délimiteur ;
Code html : Sélectionner tout 1
2
3
4<div class="{{type}}"> <img src="{{avatar}}" /> {{ firstName + " " + lastName }} </div>
Code javajscript : Sélectionner tout 1
2
3
4
5
6{ "type": "winner", "avatar": "http://ragefaces.io/rage.png", "firstName": "Nicolas", "lastName": "Cage" }
- l'intégration avec Component (fichier json) ;
- la manipulation du DOM (appendTo, replace, before et after) ;
- des événements (construct, created, ready, etc.) ;
- des getters et setters.
Téléchargement (version 0.3.2).
La page GitHub.
D'après un article sur DailyJS.
Et vous ?
Que pensez-vous de cette bibliothèque ?
Quel outil utilisez-vous pour faire vos templates ?