Update README with formatters in the extend section.
Showing
1 changed file
with
18 additions
and
16 deletions
... | @@ -58,20 +58,6 @@ Rivets.js is model interface-agnostic, meaning it can work with any event-driven | ... | @@ -58,20 +58,6 @@ Rivets.js is model interface-agnostic, meaning it can work with any event-driven |
58 | } | 58 | } |
59 | }); | 59 | }); |
60 | 60 | ||
61 | #### Formatters | ||
62 | |||
63 | Formatters are simple one-way functions that mutate the incoming value of a binding. You can use them to format dates, numbers, currencies, etc. and because they work in a similar fashion to the Unix pipeline, the output of each feeds directly as input to the next one, so you can stack as many of them together as you like. | ||
64 | |||
65 | rivets.configure({ | ||
66 | formatters: { | ||
67 | money: function(value){ | ||
68 | return accounting.formatMoney(value); | ||
69 | }, | ||
70 | date: function(value){ | ||
71 | return moment(value).format('MMM DD, YYYY'); | ||
72 | } | ||
73 | } | ||
74 | }); | ||
75 | 61 | ||
76 | #### Prefix and data preloading | 62 | #### Prefix and data preloading |
77 | 63 | ||
... | @@ -81,7 +67,11 @@ Set the `preloadData` option to `true` or `false` depending on if you want the b | ... | @@ -81,7 +67,11 @@ Set the `preloadData` option to `true` or `false` depending on if you want the b |
81 | 67 | ||
82 | ## Extend | 68 | ## Extend |
83 | 69 | ||
84 | 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. | 70 | Rivets.js is easily extended by adding your own custom *binding routines* and *formatters*. 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. |
71 | |||
72 | #### Binding Routines | ||
73 | |||
74 | *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. | ||
85 | 75 | ||
86 | 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: | 76 | 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: |
87 | 77 | ||
... | @@ -93,7 +83,7 @@ With that routine defined, the following binding will update the element's color | ... | @@ -93,7 +83,7 @@ With that routine defined, the following binding will update the element's color |
93 | 83 | ||
94 | <span data-color="model.color">COLOR</span> | 84 | <span data-color="model.color">COLOR</span> |
95 | 85 | ||
96 | #### Available bindings out-of-the-box | 86 | Available bindings out-of-the-box: |
97 | 87 | ||
98 | - data-text | 88 | - data-text |
99 | - data-html | 89 | - data-html |
... | @@ -107,6 +97,18 @@ With that routine defined, the following binding will update the element's color | ... | @@ -107,6 +97,18 @@ With that routine defined, the following binding will update the element's color |
107 | - data-*[attribute]* | 97 | - data-*[attribute]* |
108 | - data-on-*[event]* | 98 | - data-on-*[event]* |
109 | 99 | ||
100 | #### Formatters | ||
101 | |||
102 | *Formatters* are simple one-way functions that mutate the incoming value of a binding. You can use them to format dates, numbers, currencies, etc. and because they work in a similar fashion to the Unix pipeline, the output of each feeds directly as input to the next one, so you can stack as many of them together as you like. | ||
103 | |||
104 | rivets.formatters.money = function(value){ | ||
105 | return accounting.formatMoney(value); | ||
106 | }; | ||
107 | |||
108 | rivets.formatters.date = function(value){ | ||
109 | return moment(value).format('MMM DD, YYYY'); | ||
110 | }; | ||
111 | |||
110 | ## Usage Notes | 112 | ## Usage Notes |
111 | 113 | ||
112 | #### Rivets.View and Rivets.Binding | 114 | #### Rivets.View and Rivets.Binding | ... | ... |
-
Please register or sign in to post a comment