Update README and package description.
Showing
2 changed files
with
9 additions
and
8 deletions
1 | # Rivets.js | 1 | # Rivets.js |
2 | 2 | ||
3 | Rivets.js is a declarative, observer-based DOM-binding facility that plays well with existing frameworks such as [Backbone.js](http://backbonejs.org), [Spine.js](http://spinejs.com) and [Stapes.js](http://hay.github.com/stapes/). It aims to be lightweight (1.2KB minified and gzipped), extensible, and configurable to work with any event-driven model. | 3 | Rivets.js is a declarative data binding facility that plays well with existing frameworks such as [Backbone.js](http://backbonejs.org), [Spine.js](http://spinejs.com) and [Stapes.js](http://hay.github.com/stapes/). It aims to be lightweight (1.2KB minified and gzipped), extensible, and configurable to work with any event-driven model. |
4 | 4 | ||
5 | --- | 5 | --- |
6 | 6 | ||
7 | Describe your UI directly in the DOM using data attributes: | 7 | Describe your UI in plain HTML using data attributes: |
8 | 8 | ||
9 | <div id='auction'> | 9 | <div id='auction'> |
10 | <h1 data-text='auction.title'></h1> | 10 | <h1 data-text='auction.title'></h1> |
... | @@ -28,11 +28,11 @@ Describe your UI directly in the DOM using data attributes: | ... | @@ -28,11 +28,11 @@ Describe your UI directly in the DOM using data attributes: |
28 | </dl> | 28 | </dl> |
29 | </div> | 29 | </div> |
30 | 30 | ||
31 | Then tell Rivets.js what model(s) to bind to what part of the DOM: | 31 | Then tell Rivets.js what model(s) to bind to it: |
32 | 32 | ||
33 | rivets.bind($('#auction'), {auction: auction, user: currentUser}); | 33 | rivets.bind($('#auction'), {auction: auction, user: currentUser}); |
34 | 34 | ||
35 | ## Configuring | 35 | ## Configure |
36 | 36 | ||
37 | 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. | 37 | 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. |
38 | 38 | ||
... | @@ -75,9 +75,9 @@ To prevent data attribute collision, you can set the `prefix` option to somethin | ... | @@ -75,9 +75,9 @@ To prevent data attribute collision, you can set the `prefix` option to somethin |
75 | 75 | ||
76 | Set the `preloadData` option to `true` or `false` depending on if you want the binding routines to run immediately after the initial binding or not — if set to false, the binding routines will only run when the attribute value is updated. | 76 | Set the `preloadData` option to `true` or `false` depending on if you want the binding routines to run immediately after the initial binding or not — if set to false, the binding routines will only run when the attribute value is updated. |
77 | 77 | ||
78 | ## Extending | 78 | ## Extend |
79 | 79 | ||
80 | You can extend Rivets.js by adding your own custom data bindings (routines). Just pass `rivets.register` an identifier for the routine and 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. | 80 | 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. |
81 | 81 | ||
82 | So let's say we wanted a `data-color` binding that sets the element's colour. Here's what that might look like: | 82 | So let's say we wanted a `data-color` binding that sets the element's colour. Here's what that might look like: |
83 | 83 | ||
... | @@ -97,4 +97,5 @@ So let's say we wanted a `data-color` binding that sets the element's colour. He | ... | @@ -97,4 +97,5 @@ So let's say we wanted a `data-color` binding that sets the element's colour. He |
97 | - data-checked | 97 | - data-checked |
98 | - data-unchecked | 98 | - data-unchecked |
99 | - data-selected | 99 | - data-selected |
100 | - data-[attribute] | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
100 | - data-*[attribute]* | ||
101 | - data-on-*[event]* | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | { | 1 | { |
2 | "name" : "rivets", | 2 | "name" : "rivets", |
3 | "description" : "Declarative DOM-binding facility.", | 3 | "description" : "Declarative data binding facility.", |
4 | "version" : "0.1.12", | 4 | "version" : "0.1.12", |
5 | "author" : "Michael Richards", | 5 | "author" : "Michael Richards", |
6 | "main" : "./lib/rivets.js", | 6 | "main" : "./lib/rivets.js", | ... | ... |
-
Please register or sign in to post a comment