04be1776 by Michael Richards

Update the README to reflect the simpler binding routines API.

1 parent 9ce279fa
...@@ -81,13 +81,17 @@ Set the `preloadData` option to `true` or `false` depending on if you want the b ...@@ -81,13 +81,17 @@ Set the `preloadData` option to `true` or `false` depending on if you want the b
81 81
82 ## Extend 82 ## Extend
83 83
84 You can extend Rivets.js by adding your own custom data bindings (routines). Just pass `rivets.register` an identifier and a routine function. Routine functions take two arguments, `el` which is the DOM element and `value` which is the incoming value of the attribute being bound to. 84 Rivets.js comes with only the most commonly used bindings and encourages developers to add their own that are specific to the needs of their application. Rivets.js is extended by adding your own custom binding routines. *Binding routines* are the functions that run when an observed attribute changes. Their sole concern is to describe what happens to the element when a new value comes in.
85 85
86 So let's say we wanted a `data-color` binding that sets the element's colour. Here's what that might look like: 86 All binding routines are available on the `rivets.routines` object so it's easy to extend by adding/removing them from that object. Let's say we wanted a `data-color` binding that sets the element's colour, here's what the routine function for that might look like:
87 87
88 rivets.register('color', function(el, value){ 88 rivets.routines.color = function(el, value) {
89 el.style.color = value; 89 el.style.color = value;
90 }); 90 };
91
92 With that routine defined, the following binding will update the elements color when `model.color` changes:
93
94 <span data-color="model.color">COLOR</span>
91 95
92 #### Available bindings out-of-the-box 96 #### Available bindings out-of-the-box
93 97
......