4d52813d by Michael Richards

Update README and package description.

1 parent 2edbd420
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",
......