DataBinding 0.2
A class implementing a one-way mapping from field elements to a javascript object and allowing to use more flexible change events. The idea is based on the datalinking plugin for jQuery.
Details
- Author
- Kevin Chapelier
- Current version
- 0.2
- GitHub
- DEEO/DataBinding
- Downloads
- 2054
- Category
- Utilities
- Tags
- Report
- GitHub Issues
Releases
Dependencies
-
core/1.2.5:
- Function
- Array
- Class
- Class.Extras
- Element
- Element.Event
- Selectors
How to use
HTML
<form id="form" action="" method="post">
<div><input name="radio" type="radio" value="radio1" /> radio1</div>
<div><input name="radio" type="radio" value="radio2" /> radio2</div>
<div><input name="checkbox" type="checkbox" value="checkbox1" /> checkbox1</div>
<div><input name="checkbox" type="checkbox" value="checkbox2" /> checkbox2</div>
<textarea name="textarea">textarea</textarea>
<textarea name="textarea2">textarea2</textarea>
</form>
JavaScript (simple bindings)
var o = {
radio: 'radio1',
checkbox: ['checkbox1', 'checkbox2'],
textarea: null
};
//bind and assign the data to the fields
$('form').bindObject(o);
//bind and do not assign the data to the fields, use textarea2 instead of textarea
$('form').bindObject(o, {
mapping: {
textarea: '[name=textarea2]' //any selector would be accepted
},
assign: false
});
//unbind
$('form').unbindObject(o);
//assign the data to the fields without any binding
$('form').assignObject(o);
//still accept mapping options for custom selectors
//any other options will be ignored
$('form').assignObject(o, {
mapping: {
textarea: '[name=textarea2]' //any selector would be accepted
}
});
JavaScript (events)
var o = {
radio: 'radio1',
checkbox: ['checkbox1', 'checkbox2'],
textarea: null
};
//bind with a global change event and a specific change event for the radio property
$('form').bindObject(o, {
onChange: function(event, obj, key, oldValue, el) {
console.log(arguments);
},
onChangeradio: function(event, obj, key, oldValue, el) {
console.log(arguments);
}
});
History
0.2 (2010-10-09)
- Renamed Element:bind, unbind and assign to bindObject, unbindObject and assignObject
- Fixed the assign:false issue, now retrieve the values from the fields element
0.1 (2010-10-07)
- Experimental release !
- First release
Notes
- Still require more testing.
Discuss
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus