efa6fe0e by Michael Richards

Update README with formatters in the extend section.

1 parent 885b6848
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
......