7cf880b2 by Patrick Gibson

Fix some typos; add a very basic example showing the context object syntax in the DOM elements.

1 parent f2431602
...@@ -10,11 +10,16 @@ Rivets.js is alpha software. While it should work well enough for prototyping an ...@@ -10,11 +10,16 @@ Rivets.js is alpha software. While it should work well enough for prototyping an
10 10
11 No contrived example here yet, but the `rivets` module is simple. It exposes three main functions; a `configure` function that is used to set configuration options and the adapter interface, a `register` function that is used to register custom data bindings and a `bind` function that is used to bind a set of context objects to a DOM element. 11 No contrived example here yet, but the `rivets` module is simple. It exposes three main functions; a `configure` function that is used to set configuration options and the adapter interface, a `register` function that is used to register custom data bindings and a `bind` function that is used to bind a set of context objects to a DOM element.
12 12
13 The `bind` function takes two arguements; the parent DOM element that you wish to bind to and a set of context objects. 13 The `bind` function takes two arguments; the parent DOM element that you wish to bind to and a set of context objects.
14 14
15 rivets.bind(el, {user: currentUser, item: item}); 15 rivets.bind(el, {user: currentUser, item: item});
16 16
17 Configuring Rivets.js is required before anything can be binded, as binding is dependant on having an adapter defined. Here's a sample configuration for using Rivets.js with Backbone.js. 17 Context objects are referenced in your data-binding declarations using dot-notation:
18
19 <input type="text" data-value="currentUser.email">
20 <input type="checkbox" data-enabled="item.active">
21
22 Configuring Rivets.js is required before anything can be bound, as binding is dependant on having an adapter defined. Here's a sample configuration for using Rivets.js with Backbone.js.
18 23
19 rivets.configure({ 24 rivets.configure({
20 adapter: { 25 adapter: {
...@@ -25,12 +30,12 @@ Configuring Rivets.js is required before anything can be binded, as binding is d ...@@ -25,12 +30,12 @@ Configuring Rivets.js is required before anything can be binded, as binding is d
25 obj.get(keypath); 30 obj.get(keypath);
26 }, 31 },
27 publish: function(obj, keypath, value) { 32 publish: function(obj, keypath, value) {
28 obj.set(keypath, data); 33 obj.set(keypath, value);
29 } 34 }
30 } 35 }
31 }); 36 });
32 37
33 To add custom data bindings, use the `register` function and pass in an identifier for the binding as well as the binding function. Binding functions take two arguments; `el` which is the DOM element and `value` which is any new incomming value from the observed context object. 38 To add custom data bindings, use the `register` function and pass in an identifier for the binding as well as the binding function. Binding functions take two arguments; `el` which is the DOM element and `value` which is any new incoming value from the observed context object.
34 39
35 rivets.register('active', function(el, value){ 40 rivets.register('active', function(el, value){
36 el.className = value ? 'active' : 'inactive'; 41 el.className = value ? 'active' : 'inactive';
......