Fix some typos; add a very basic example showing the context object syntax in the DOM elements.
Showing
1 changed file
with
9 additions
and
4 deletions
... | @@ -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'; | ... | ... |
-
Please register or sign in to post a comment