DailyJS

DailyJS

The JavaScript blog.


Tagmmvm
Featured

libraries data-binding mmvm

Ripple.js

Posted on .

Ripple.js (GitHub: ripplejs / ripple, License: MIT) from Segment.io is a library for templating and data binding. It's based around templates, and has a chainable API, allowing plugins to be added to components:

var Person = ripple('<div>{%raw%}{{name}}{%endraw%}</div>')  
  .use(events)
  .use(each)
  .use(dispatch);

var person = new Person({  
  name: 'Tom'
});

person.appendTo(document.body);  

The plugins can add directives in a similar way to AngularJS: take a look at each, for example.

There's a JSFiddle Markdown example that uses a template embedded in a script element, and two plugins: ripple.events and ripple.markdown. The plugins allow changes to be observed on the textarea and Markdown is set to render using a directive on a div element.

One of the features that I like is the pattern for view composition. Views can be embedded, and data will still be synced when it changes.

Also, the library seems well tested, so you can get more usage ideas from the tests.