Add source documentation for the core binders.
Showing
1 changed file
with
22 additions
and
1 deletions
1 | # Core binders that are included with Rivets.js. | 1 | # Basic set of core binders that are included with Rivets.js. |
2 | 2 | ||
3 | # Sets the element's text value. | ||
3 | Rivets.binders.text = (el, value) -> | 4 | Rivets.binders.text = (el, value) -> |
4 | if el.textContent? | 5 | if el.textContent? |
5 | el.textContent = if value? then value else '' | 6 | el.textContent = if value? then value else '' |
6 | else | 7 | else |
7 | el.innerText = if value? then value else '' | 8 | el.innerText = if value? then value else '' |
8 | 9 | ||
10 | # Sets the element's HTML content. | ||
9 | Rivets.binders.html = (el, value) -> | 11 | Rivets.binders.html = (el, value) -> |
10 | el.innerHTML = if value? then value else '' | 12 | el.innerHTML = if value? then value else '' |
11 | 13 | ||
14 | # Shows the element when value is true. | ||
12 | Rivets.binders.show = (el, value) -> | 15 | Rivets.binders.show = (el, value) -> |
13 | el.style.display = if value then '' else 'none' | 16 | el.style.display = if value then '' else 'none' |
14 | 17 | ||
18 | # Hides the element when value is true (negated version of `show` binder). | ||
15 | Rivets.binders.hide = (el, value) -> | 19 | Rivets.binders.hide = (el, value) -> |
16 | el.style.display = if value then 'none' else '' | 20 | el.style.display = if value then 'none' else '' |
17 | 21 | ||
22 | # Enables the element when value is true. | ||
18 | Rivets.binders.enabled = (el, value) -> | 23 | Rivets.binders.enabled = (el, value) -> |
19 | el.disabled = !value | 24 | el.disabled = !value |
20 | 25 | ||
26 | # Disables the element when value is true (negated version of `enabled` binder). | ||
21 | Rivets.binders.disabled = (el, value) -> | 27 | Rivets.binders.disabled = (el, value) -> |
22 | el.disabled = !!value | 28 | el.disabled = !!value |
23 | 29 | ||
30 | # Checks a checkbox or radio input when the value is true. Also sets the model | ||
31 | # property when the input is checked or unchecked (two-way binder). | ||
24 | Rivets.binders.checked = | 32 | Rivets.binders.checked = |
25 | publishes: true | 33 | publishes: true |
26 | bind: (el) -> | 34 | bind: (el) -> |
... | @@ -33,6 +41,9 @@ Rivets.binders.checked = | ... | @@ -33,6 +41,9 @@ Rivets.binders.checked = |
33 | else | 41 | else |
34 | el.checked = !!value | 42 | el.checked = !!value |
35 | 43 | ||
44 | # Unchecks a checkbox or radio input when the value is true (negated version of | ||
45 | # `checked` binder). Also sets the model property when the input is checked or | ||
46 | # unchecked (two-way binder). | ||
36 | Rivets.binders.unchecked = | 47 | Rivets.binders.unchecked = |
37 | publishes: true | 48 | publishes: true |
38 | bind: (el) -> | 49 | bind: (el) -> |
... | @@ -45,6 +56,8 @@ Rivets.binders.unchecked = | ... | @@ -45,6 +56,8 @@ Rivets.binders.unchecked = |
45 | else | 56 | else |
46 | el.checked = !value | 57 | el.checked = !value |
47 | 58 | ||
59 | # Sets the element's value. Also sets the model property when the input changes | ||
60 | # (two-way binder). | ||
48 | Rivets.binders.value = | 61 | Rivets.binders.value = |
49 | publishes: true | 62 | publishes: true |
50 | bind: (el) -> | 63 | bind: (el) -> |
... | @@ -63,6 +76,7 @@ Rivets.binders.value = | ... | @@ -63,6 +76,7 @@ Rivets.binders.value = |
63 | else if value?.toString() isnt el.value?.toString() | 76 | else if value?.toString() isnt el.value?.toString() |
64 | el.value = if value? then value else '' | 77 | el.value = if value? then value else '' |
65 | 78 | ||
79 | # Inserts and binds the element and it's child nodes into the DOM when true. | ||
66 | Rivets.binders.if = | 80 | Rivets.binders.if = |
67 | block: true | 81 | block: true |
68 | 82 | ||
... | @@ -102,6 +116,8 @@ Rivets.binders.if = | ... | @@ -102,6 +116,8 @@ Rivets.binders.if = |
102 | update: (models) -> | 116 | update: (models) -> |
103 | @nested?.update models | 117 | @nested?.update models |
104 | 118 | ||
119 | # Removes and unbinds the element and it's child nodes into the DOM when true | ||
120 | # (negated version of `if` binder). | ||
105 | Rivets.binders.unless = | 121 | Rivets.binders.unless = |
106 | block: true | 122 | block: true |
107 | 123 | ||
... | @@ -117,6 +133,7 @@ Rivets.binders.unless = | ... | @@ -117,6 +133,7 @@ Rivets.binders.unless = |
117 | update: (models) -> | 133 | update: (models) -> |
118 | Rivets.binders.if.update.call @, models | 134 | Rivets.binders.if.update.call @, models |
119 | 135 | ||
136 | # Binds an event handler on the element. | ||
120 | Rivets.binders['on-*'] = | 137 | Rivets.binders['on-*'] = |
121 | function: true | 138 | function: true |
122 | 139 | ||
... | @@ -127,6 +144,7 @@ Rivets.binders['on-*'] = | ... | @@ -127,6 +144,7 @@ Rivets.binders['on-*'] = |
127 | Rivets.Util.unbindEvent el, @args[0], @handler if @handler | 144 | Rivets.Util.unbindEvent el, @args[0], @handler if @handler |
128 | Rivets.Util.bindEvent el, @args[0], @handler = @eventHandler value | 145 | Rivets.Util.bindEvent el, @args[0], @handler = @eventHandler value |
129 | 146 | ||
147 | # Appends bound instances of the element in place for each item in the array. | ||
130 | Rivets.binders['each-*'] = | 148 | Rivets.binders['each-*'] = |
131 | block: true | 149 | block: true |
132 | 150 | ||
... | @@ -197,6 +215,7 @@ Rivets.binders['each-*'] = | ... | @@ -197,6 +215,7 @@ Rivets.binders['each-*'] = |
197 | 215 | ||
198 | view.update data for view in @iterated | 216 | view.update data for view in @iterated |
199 | 217 | ||
218 | # Adds or removes the class from the element when value is true or false. | ||
200 | Rivets.binders['class-*'] = (el, value) -> | 219 | Rivets.binders['class-*'] = (el, value) -> |
201 | elClass = " #{el.className} " | 220 | elClass = " #{el.className} " |
202 | 221 | ||
... | @@ -206,6 +225,8 @@ Rivets.binders['class-*'] = (el, value) -> | ... | @@ -206,6 +225,8 @@ Rivets.binders['class-*'] = (el, value) -> |
206 | else | 225 | else |
207 | elClass.replace(" #{@args[0]} ", ' ').trim() | 226 | elClass.replace(" #{@args[0]} ", ' ').trim() |
208 | 227 | ||
228 | # Sets the attribute on the element. If no binder above is matched it will fall | ||
229 | # back to using this binder. | ||
209 | Rivets.binders['*'] = (el, value) -> | 230 | Rivets.binders['*'] = (el, value) -> |
210 | if value | 231 | if value |
211 | el.setAttribute @type, value | 232 | el.setAttribute @type, value | ... | ... |
-
Please register or sign in to post a comment