@@ -34,7 +34,7 @@ Then tell Rivets.js what model(s) to bind to it:
## Configure
Use `rivets.configure` to configure Rivets.js for your app. There are a few handy configuration options, such as setting the data attribute prefix and adding formatters that you can pipe binding values to, but setting the adapter is the only required configuration since Rivets.js needs to know how to observe your models for changes as they happen.
Use `rivets.configure` to configure Rivets.js for your app (or set them manually on `rivets.config`). There are a few handy configuration options, such as setting the data attribute prefix and adding formatters that you can pipe binding values to, but setting the adapter is the only required configuration since Rivets.js needs to know how to observe your models for changes as they happen.
#### Adapter
...
...
@@ -81,15 +81,15 @@ Set the `preloadData` option to `true` or `false` depending on if you want the b
## Extend
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.
Rivets.js comes bundled with a few commonly used bindings, but users are encouraged to add their own that are specific to the needs of their application. Rivets.js is easily extended by adding your own 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. All binding routines are publicly available on the `rivets.routines` object.
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:
Let's say we wanted a `data-color` binding that sets the element's colour, here's what the routine function for that binding might look like:
rivets.routines.color = function(el, value) {
el.style.color = value;
};
With that routine defined, the following binding will update the elements color when `model.color` changes:
With that routine defined, the following binding will update the element's color when `model.color` changes: