Better support radio inputs in bindProperty and config forms actions.
Review Request #6160 — Created July 28, 2014 and submitted — Latest diff uploaded
$.fn.bindProperty()now accepts aradioValueoption. If set, this
will manage standard radio behavior between radio input elements and
a model property. Each input is expected to havebindProperty()called
on it, passing aradioValuecorresponding to the appropriate value in
the model's property.When the element's property (which is expected to be a boolean) changes
to true, the model's property will be set to theradioValue. Otherwise,
to prevent conflicts, nothing will be set on the model (with the
expectation being that anotherbindProperty()will handle the radio
input that's now checked).When the model's property changes, the value will be compared against
theradioValue. If they match, the radio input will be checked.The new radio action support for config form list items now support
taking aradioValue, which is then passed tobindProperty.
Made use of this in a change to associate multiple radio inputs with a
single model property. Verified that the element and model always had
matching states.Added new unit tests, which pass.
| djblets/static/djblets/js/jquery.gravy.backboneUtils.js | |||
|---|---|---|---|
| Revision 88f55dbea6861567e0c2e4fb170d598e1ab24cd9 | New Change | ||
| 47 lines | |||
function updateClassName() {
|
|||
| 48 |
*
|
48 |
*
|
| 49 |
* If options.inverse is true, then the value will be inversed between both
|
49 |
* If options.inverse is true, then the value will be inversed between both
|
| 50 |
* properties. This is useful when tying a "disabled" element property to
|
50 |
* properties. This is useful when tying a "disabled" element property to
|
| 51 |
* an "enabled" or "can*" model property. It only makes sense for boolean
|
51 |
* an "enabled" or "can*" model property. It only makes sense for boolean
|
| 52 |
* properties.
|
52 |
* properties.
|
| 53 |
*
|
||
| 54 |
* If options.radioValue is set, then the assumption is that a boolean
|
||
| 55 |
* property on the element (such as 'checked') maps to a non-boolean value
|
||
| 56 |
* in a model, of which many inputs will be bound. In this case, the element's
|
||
| 57 |
* property will be set to a boolean based on whether the model property's
|
||
| 58 |
* value matches option.radioValue. Likewise, the model property's value will
|
||
| 59 |
* be set to options.radioValue if the element's property value is true.
|
||
| 53 |
*/
|
60 |
*/
|
| 54 |
$.fn.bindProperty = function(elPropName, model, modelPropName, options) { |
61 |
$.fn.bindProperty = function(elPropName, model, modelPropName, options) { |
| 55 |
function updateElementProp() { |
62 |
function updateElementProp() { |
| 56 |
var value = model.get(modelPropName); |
63 |
var value = model.get(modelPropName); |
| 57 | 64 | ||
| 65 |
if (options.radioValue !== undefined) { |
||
| 66 |
value = (options.radioValue === value); |
||
| 67 |
} |
||
| 68 | |||
| 58 |
if (options.inverse) { |
69 |
if (options.inverse) { |
| 59 |
value = !value; |
70 |
value = !value; |
| 60 |
} |
71 |
} |
| 61 | 72 | ||
| 62 |
if (elPropName === 'text' || elPropName === 'html') { |
73 |
if (elPropName === 'text' || elPropName === 'html') { |
| 10 lines | |||
function updateElementProp() {
|
|||
| 73 |
var $this = this; |
84 |
var $this = this; |
| 74 | 85 | ||
| 75 |
options = _.defaults(options || {}, { |
86 |
options = _.defaults(options || {}, { |
| 76 |
modelToElement: true, |
87 |
modelToElement: true, |
| 77 |
elementToModel: true, |
88 |
elementToModel: true, |
| 78 |
inverse: false |
89 |
inverse: false, |
| 90 |
radioValue: undefined |
||
| 79 |
}); |
91 |
}); |
| 80 | 92 | ||
| 81 |
if (options.modelToElement) { |
93 |
if (options.modelToElement) { |
| 82 |
model.on('change:' + modelPropName, updateElementProp); |
94 |
model.on('change:' + modelPropName, updateElementProp); |
| 83 |
updateElementProp(); |
95 |
updateElementProp(); |
| 7 lines | |||
function updateElementProp() {
|
|||
| 91 | 103 | ||
| 92 |
if (options.inverse) { |
104 |
if (options.inverse) { |
| 93 |
value = !value; |
105 |
value = !value; |
| 94 |
} |
106 |
} |
| 95 | 107 | ||
| 108 |
if (options.radioValue !== undefined) { |
||
| 109 |
if (value) { |
||
| 110 |
value = options.radioValue; |
||
| 111 |
} else { |
||
| 112 |
return; |
||
| 113 |
} |
||
| 114 |
} |
||
| 115 | |||
| 96 |
model.set(modelPropName, value); |
116 |
model.set(modelPropName, value); |
| 97 |
}); |
117 |
}); |
| 98 |
} |
118 |
} |
| 99 | 119 | ||
| 100 |
return $this; |
120 |
return $this; |
| 30 lines | |||
| djblets/static/djblets/js/configForms/views/listItemView.js |
|---|
| djblets/static/djblets/js/tests/backboneUtilsTests.js |
|---|