Rivets 101: Data binding and templating revisited

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.

2 thoughts on “Rivets 101: Data binding and templating revisited

Leave a Reply

Your email address will not be published. Required fields are marked *