22388cce by Michael Richards

Add source documentation for the core binders.

1 parent ddb69e8c
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
......