Merge branch 'move-formatters-outside-config'
Showing
3 changed files
with
29 additions
and
28 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 | ... | ... |
... | @@ -78,9 +78,7 @@ describe('Rivets.Binding', function() { | ... | @@ -78,9 +78,7 @@ describe('Rivets.Binding', function() { |
78 | }); | 78 | }); |
79 | 79 | ||
80 | it('applies any formatters to the value before performing the routine', function() { | 80 | it('applies any formatters to the value before performing the routine', function() { |
81 | rivets.config.formatters = { | 81 | rivets.formatters.awesome = function(value) { return 'awesome ' + value }; |
82 | awesome: function(value) { return 'awesome ' + value } | ||
83 | }; | ||
84 | binding.formatters.push('awesome'); | 82 | binding.formatters.push('awesome'); |
85 | spyOn(binding, 'routine'); | 83 | spyOn(binding, 'routine'); |
86 | binding.set('sweater'); | 84 | binding.set('sweater'); |
... | @@ -133,9 +131,7 @@ describe('Rivets.Binding', function() { | ... | @@ -133,9 +131,7 @@ describe('Rivets.Binding', function() { |
133 | 131 | ||
134 | describe('formattedValue()', function() { | 132 | describe('formattedValue()', function() { |
135 | it('applies the current formatters on the supplied value', function() { | 133 | it('applies the current formatters on the supplied value', function() { |
136 | rivets.config.formatters = { | 134 | rivets.formatters.awesome = function(value) { return 'awesome ' + value }; |
137 | awesome: function(value) { return 'awesome ' + value } | ||
138 | }; | ||
139 | binding.formatters.push('awesome'); | 135 | binding.formatters.push('awesome'); |
140 | expect(binding.formattedValue('hat')).toBe('awesome hat'); | 136 | expect(binding.formattedValue('hat')).toBe('awesome hat'); |
141 | }); | 137 | }); |
... | @@ -148,10 +144,8 @@ describe('Rivets.Binding', function() { | ... | @@ -148,10 +144,8 @@ describe('Rivets.Binding', function() { |
148 | 144 | ||
149 | describe('with a multi-argument formatter string', function() { | 145 | describe('with a multi-argument formatter string', function() { |
150 | beforeEach(function() { | 146 | beforeEach(function() { |
151 | rivets.config.formatters = { | 147 | rivets.formatters.awesome = function(value, prefix) { |
152 | awesome: function(value, prefix) { | ||
153 | return prefix + ' awesome ' + value; | 148 | return prefix + ' awesome ' + value; |
154 | } | ||
155 | }; | 149 | }; |
156 | binding.formatters.push('awesome super'); | 150 | binding.formatters.push('awesome super'); |
157 | }); | 151 | }); | ... | ... |
... | @@ -34,8 +34,8 @@ class Rivets.Binding | ... | @@ -34,8 +34,8 @@ class Rivets.Binding |
34 | id = args.shift() | 34 | id = args.shift() |
35 | value = if @model[id] instanceof Function | 35 | value = if @model[id] instanceof Function |
36 | @model[id] value, args... | 36 | @model[id] value, args... |
37 | else if Rivets.config.formatters[id] | 37 | else if Rivets.formatters[id] |
38 | Rivets.config.formatters[id] value, args... | 38 | Rivets.formatters[id] value, args... |
39 | 39 | ||
40 | value | 40 | value |
41 | 41 | ||
... | @@ -218,13 +218,18 @@ Rivets.routines = | ... | @@ -218,13 +218,18 @@ Rivets.routines = |
218 | # Default configuration. | 218 | # Default configuration. |
219 | Rivets.config = | 219 | Rivets.config = |
220 | preloadData: true | 220 | preloadData: true |
221 | formatters: {} | 221 | |
222 | # Default formatters. There aren't any. | ||
223 | Rivets.formatters = {} | ||
222 | 224 | ||
223 | # The rivets module. This is the public interface that gets exported. | 225 | # The rivets module. This is the public interface that gets exported. |
224 | rivets = | 226 | rivets = |
225 | # Exposes the core binding routines that can be extended or stripped down. | 227 | # Exposes the core binding routines that can be extended or stripped down. |
226 | routines: Rivets.routines | 228 | routines: Rivets.routines |
227 | 229 | ||
230 | # Exposes the formatters object to be extended. | ||
231 | formatters: Rivets.formatters | ||
232 | |||
228 | # Exposes the rivets configuration options. These can be set manually or from | 233 | # Exposes the rivets configuration options. These can be set manually or from |
229 | # rivets.configure with an object literal. | 234 | # rivets.configure with an object literal. |
230 | config: Rivets.config | 235 | config: Rivets.config | ... | ... |
-
Please register or sign in to post a comment