Last year, I wrote the post “Data binding and templating with Rivets“. I decided to write a more indepth three-post arch on Rivets.js to accompany the demos that I recently posted to Github. This post is meant to be a “revisit” of the original post.
Rivets.js is a very lean javascript library that lets you do data binding and templating. There are a number of libraries out there that let you do the same thing but data binding and templating is the only thing that rivets does. That is a good thing because that means that it will not interfere with the other stuff going on within your system.
Lets look at a basic example.
In the above example, there is a textarea and a section. The textarea contains an “rv-value” attribute and the section contains an “rv-html” attribute. Both attributes have the same variable name as a value. The “rv-value” attribute uses the plaintext value of the variable while the “rv-html” attribute renders the value as html. This means that if you type “<b>Text</b>” into the textarea, it will output the word “Text” in bold.
This second example uses “rv-value” again, for the input. It uses {curly brackets} to output the value within the paragraph, though. This method makes output of complex data much easier because you do not need to have a separate element to output each value.
Knockout, Angular, and Ember also do data binding in one way or another but rivets does it in a slightly simpler way. Have a question about something covered above? Feel free to drop a comment below or send me a message directly.
