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
2585
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