d5ccb916 by Michael Richards

Add language identifiers to code blocks so that GitHub will syntax highlight them. [Closes #60]

1 parent e0b6c36b
Showing 1 changed file with 71 additions and 57 deletions
...@@ -6,32 +6,35 @@ Rivets.js is a declarative data binding facility that plays well with existing f ...@@ -6,32 +6,35 @@ Rivets.js is a declarative data binding facility that plays well with existing f
6 6
7 Describe your UI in plain HTML using data attributes: 7 Describe your UI in plain HTML using data attributes:
8 8
9 <div id='auction'> 9 ```html
10 <h1 data-text='auction.title'></h1> 10 <div id='auction'>
11 <img data-src='auction.image_url'> 11 <h1 data-text='auction.title'></h1>
12 <span data-text='auction.timeRemaining | time'></span> 12 <img data-src='auction.image_url'>
13 13 <span data-text='auction.timeRemaining | time'></span>
14 <div class='alert-box' data-show='auction.endingSoon'> 14
15 <p>Hurry up! This auction is ending soon.</p> 15 <div class='alert-box' data-show='auction.endingSoon'>
16 </div> 16 <p>Hurry up! This auction is ending soon.</p>
17 17 </div>
18 <dl> 18
19 <dt>Highest Bid:</dt> 19 <dl>
20 <dd data-text='auction.bid | currency'></dd> 20 <dt>Highest Bid:</dt>
21 <dt>Bidder:</dt> 21 <dd data-text='auction.bid | currency'></dd>
22 <dd data-text='auction.bidder'></dd> 22 <dt>Bidder:</dt>
23 </dl> 23 <dd data-text='auction.bidder'></dd>
24 24 </dl>
25 <dl> 25
26 <dt>Bids Left:</dt> 26 <dl>
27 <dd data-text='user.bidCount'></dd> 27 <dt>Bids Left:</dt>
28 </dl> 28 <dd data-text='user.bidCount'></dd>
29 </div> 29 </dl>
30 </div>
31 ```
30 32
31 Then tell Rivets.js what model(s) to bind to it: 33 Then tell Rivets.js what model(s) to bind to it:
32 34
33 rivets.bind($('#auction'), {auction: auction, user: currentUser}); 35 ```javascript
34 36 rivets.bind($('#auction'), {auction: auction, user: currentUser});
37 ```
35 ## Configure 38 ## Configure
36 39
37 Use `rivets.configure` to configure Rivets.js for your app (or you can set configuration options manually on `rivets.config`). 40 Use `rivets.configure` to configure Rivets.js for your app (or you can set configuration options manually on `rivets.config`).
...@@ -40,38 +43,43 @@ Use `rivets.configure` to configure Rivets.js for your app (or you can set confi ...@@ -40,38 +43,43 @@ Use `rivets.configure` to configure Rivets.js for your app (or you can set confi
40 43
41 Rivets.js is model interface-agnostic, meaning it can work with any event-driven model by way of defining an adapter. This is the only required configuration as it's what Rivet.js uses to observe and interact with your model objects. An adapter is just an object that responds to `subscribe`, `unsubscribe`, `read` and `publish`. Here is a sample configuration with an adapter for using Rivets.js with Backbone.js. 44 Rivets.js is model interface-agnostic, meaning it can work with any event-driven model by way of defining an adapter. This is the only required configuration as it's what Rivet.js uses to observe and interact with your model objects. An adapter is just an object that responds to `subscribe`, `unsubscribe`, `read` and `publish`. Here is a sample configuration with an adapter for using Rivets.js with Backbone.js.
42 45
43 rivets.configure({ 46 ```javascript
44 adapter: { 47 rivets.configure({
45 subscribe: function(obj, keypath, callback) { 48 adapter: {
46 callback.wrapped = function(m, v) { callback(v) }; 49 subscribe: function(obj, keypath, callback) {
47 obj.on('change:' + keypath, callback.wrapped); 50 callback.wrapped = function(m, v) { callback(v) };
48 }, 51 obj.on('change:' + keypath, callback.wrapped);
49 unsubscribe: function(obj, keypath, callback) { 52 },
50 obj.off('change:' + keypath, callback.wrapped); 53 unsubscribe: function(obj, keypath, callback) {
51 }, 54 obj.off('change:' + keypath, callback.wrapped);
52 read: function(obj, keypath) { 55 },
53 return obj.get(keypath); 56 read: function(obj, keypath) {
54 }, 57 return obj.get(keypath);
55 publish: function(obj, keypath, value) { 58 },
56 obj.set(keypath, value); 59 publish: function(obj, keypath, value) {
57 } 60 obj.set(keypath, value);
58 } 61 }
59 }); 62 }
60 63 });
64 ```
61 65
62 #### Prefix and data preloading 66 #### Prefix and data preloading
63 67
64 To prevent data attribute collision, you can set the `prefix` option to something like 'rv' or 'bind' so that data attributes are prefixed like `data-rv-text`. 68 To prevent data attribute collision, you can set the `prefix` option to something like 'rv' or 'bind' so that data attributes are prefixed like `data-rv-text`.
65 69
66 rivets.configure({ 70 ```javascript
67 prefix: 'rv' 71 rivets.configure({
68 }); 72 prefix: 'rv'
73 });
74 ```
69 75
70 Set the `preloadData` option to `false` if you don't want your bindings to be bootstrapped with the current model values on bind. This option is set to `true` by default. 76 Set the `preloadData` option to `false` if you don't want your bindings to be bootstrapped with the current model values on bind. This option is set to `true` by default.
71 77
72 rivets.configure({ 78 ```javascript
73 preloadData: false 79 rivets.configure({
74 }); 80 preloadData: false
81 });
82 ```
75 83
76 ## Extend 84 ## Extend
77 85
...@@ -83,13 +91,17 @@ Rivets.js is easily extended by adding your own custom *binding routines* and *f ...@@ -83,13 +91,17 @@ Rivets.js is easily extended by adding your own custom *binding routines* and *f
83 91
84 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: 92 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:
85 93
86 rivets.routines.color = function(el, value) { 94 ```javascript
87 el.style.color = value; 95 rivets.routines.color = function(el, value) {
88 }; 96 el.style.color = value;
97 };
98 ```
89 99
90 With that routine defined, the following binding will update the element's color when `model.color` changes: 100 With that routine defined, the following binding will update the element's color when `model.color` changes:
91 101
92 <span data-color="model.color">COLOR</span> 102 ```html
103 <span data-color="model.color">COLOR</span>
104 ```
93 105
94 Available bindings out-of-the-box: 106 Available bindings out-of-the-box:
95 107
...@@ -111,7 +123,7 @@ Available bindings out-of-the-box: ...@@ -111,7 +123,7 @@ Available bindings out-of-the-box:
111 123
112 *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. 124 *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.
113 125
114 ``` 126 ```javascript
115 rivets.formatters.money = function(value){ 127 rivets.formatters.money = function(value){
116 return accounting.formatMoney(value); 128 return accounting.formatMoney(value);
117 }; 129 };
...@@ -121,7 +133,7 @@ rivets.formatters.date = function(value){ ...@@ -121,7 +133,7 @@ rivets.formatters.date = function(value){
121 }; 133 };
122 ``` 134 ```
123 135
124 ``` 136 ```html
125 <span data-text="event.startDate | date"></span> 137 <span data-text="event.startDate | date"></span>
126 ``` 138 ```
127 139
...@@ -141,13 +153,15 @@ Just use `model:property` instead of `model.property` inside your binding declar ...@@ -141,13 +153,15 @@ Just use `model:property` instead of `model.property` inside your binding declar
141 153
142 Computed properties are functions that get re-evaluated when one or more dependent properties change. Declaring computed properties in Rivets.js is simple, just separate the function from it's dependencies with a *<*. The following `data-text` binding will get re-evaluated with `event.duration()` when either the event's `start` or `end` attribute changes. 154 Computed properties are functions that get re-evaluated when one or more dependent properties change. Declaring computed properties in Rivets.js is simple, just separate the function from it's dependencies with a *<*. The following `data-text` binding will get re-evaluated with `event.duration()` when either the event's `start` or `end` attribute changes.
143 155
144 <span data-text="event:duration < start end"></span> 156 ```html
157 <span data-text="event:duration < start end"></span>
158 ```
145 159
146 #### Iteration Binding 160 #### Iteration Binding
147 161
148 Use the `data-each-[item]` binding to have Rivets.js automatically loop over items in an array and append bound instances of that element. Within that element you can bind to the iterated item as well as any contexts that are available in the parent view. 162 Use the `data-each-[item]` binding to have Rivets.js automatically loop over items in an array and append bound instances of that element. Within that element you can bind to the iterated item as well as any contexts that are available in the parent view.
149 163
150 ``` 164 ```html
151 <ul> 165 <ul>
152 <li data-each-todo="list.todos"> 166 <li data-each-todo="list.todos">
153 <input type="checkbox" data-checked="todo.done"> 167 <input type="checkbox" data-checked="todo.done">
...@@ -158,7 +172,7 @@ Use the `data-each-[item]` binding to have Rivets.js automatically loop over ite ...@@ -158,7 +172,7 @@ Use the `data-each-[item]` binding to have Rivets.js automatically loop over ite
158 172
159 If the array you're binding to contains non-model objects (they don't conform to your adapter), you can still iterate over them, just make sure to use the adapter bypass syntax — in doing so, the iteration binding will still update when the array changes, however the individual items will not since they'd be bypassing the `adapter.subscribe`. 173 If the array you're binding to contains non-model objects (they don't conform to your adapter), you can still iterate over them, just make sure to use the adapter bypass syntax — in doing so, the iteration binding will still update when the array changes, however the individual items will not since they'd be bypassing the `adapter.subscribe`.
160 174
161 ``` 175 ```html
162 <ul> 176 <ul>
163 <li data-each-link="item.links"> 177 <li data-each-link="item.links">
164 <a data-href="link:url" data-text="link:title"></span> 178 <a data-href="link:url" data-text="link:title"></span>
...@@ -168,7 +182,7 @@ If the array you're binding to contains non-model objects (they don't conform to ...@@ -168,7 +182,7 @@ If the array you're binding to contains non-model objects (they don't conform to
168 182
169 Also note that you may bind to the iterated item directly on the parent element. 183 Also note that you may bind to the iterated item directly on the parent element.
170 184
171 ``` 185 ```html
172 <ul> 186 <ul>
173 <li data-each-tag="item.tags" data-text="tag:name"></li> 187 <li data-each-tag="item.tags" data-text="tag:name"></li>
174 </ul> 188 </ul>
......