Easy Data Binding Plugin For jQuery - databind.js
File Size: | 11.9 KB |
---|---|
Views Total: | 250 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight jQuery data bindng plugin that makes it easy to bind data to elements using only HTML data attributes.
How to use it:
1. To begin with, include the databind.js plugin after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.databind.min.js"></script>
2. Add the [data-bind="[$fieldName]"]
attribute to the elements as follows:
<input type="text" data-bind="field-example"> <span class="bindSpan" data-bind="field-example"></span> <select data-bind="field-example"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> ...
3. Extract the text from the option
tag instead of its value
attritbue:
<select data-bind="field-otion"> <option value=""></option> <option value="1">label 1</option> <option value="2">label 2</option> <option value="3">label 3</option> </select> <input type="text" data-bind="field-otion" data-bind-option-text>
4. Enable an element to toggle the visibility of your elements.
<input type="radio" name="display-example" value="1" checked> <input type="radio" name="display-example" value="2"> <span data-display="display-example:1">Display content 1</span> <span data-display="display-example:2">Display content 2</span>
5. Enable the Display Only mode using the display-only
class.
<input type="text" class="display-only" value="display-only input"> <select class="display-only"> <option value=""></option> <option value="1" selected>label 1</option> <option value="2">label 2</option> <option value="3">label 3</option> </select> <input type="radio" name="display-only-demo" class="display-only" value="1"> <input type="radio" name="display-only-demo" class="display-only" value="2" checked> <input type="radio" name="display-only-demo" class="display-only" value="3"> <input type="checkbox" name="display-only-demo" class="display-only" value="1"> <input type="checkbox" name="display-only-demo" class="display-only" value="2" checked> <input type="checkbox" name="display-only-demo" class="display-only" value="3" checked>
Changelog:
2023-07-15
- Add support for jQuery's no Conflict mode.
- Add [data-bind] event for textarea elements.
2023-06-09
- Prevent initialization of "display-only" items in hidden templates which is wrapped by a hidden [id*='emplate'] element.
2023-05-30
- Rollback the modification in 1.6.7 and add a new class to achieve the purpose instead.
2023-05-25
- Remove class "display-only" after ready to prevent re-triggering the appending event while using other plug-ins such as tablesorter.js.
2023-05-23
- Minor optimization.
This awesome jQuery plugin is developed by scintilla0. For more Advanced Usages, please check the demo page or visit the official website.