feb9426d by Michael Richards

Merge branch 'move-formatters-outside-config'

2 parents 5938aeaa d7965f97
...@@ -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
......