Easy Data Binding Plugin For jQuery - databind.js

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>

6. Set checkboxes and radio buttons to readonly.

$("[name='radioGropu'], [name='checkGroup']").readonlyCheckable();

7. Evaluate the boolean value of an element. Returns null if it is unparseable.

// true
let fieldIsBoolean = $("#fieldBoolean").boolean();

// null
let fieldIsBoolean = $("#fieldNumber").boolean();

// true
let fieldIsBoolean = $("#fieldBooleanFalse").boolean("false");

// false
let fieldIsBoolean = $("#fieldNumber").boolean("true");

8. Evaluate whether parameter or the value of the target dom is undefined, null or blank.

 $.isBlank()
 // OR
 $("$selector").isBlank()

9. Change the text of the element.

$("#selector").modify(value => 'prefix ' + value + ' suffix');
$("#selector").modify('prefix ', ' suffix');

10. Increase & decrease the value of the element.

$("#selector").increase();
$("#selector").increase('-10');

Changelog:

v1.7.0 (2024-03-11)

• Add event [data-hide] to do the opposite of [data-display].

v1.6.29 (2024-03-11)

• Bugfix

v1.6.28 (2024-03-05)

• Bugfixes

v1.6.27 (2024-02-04)

• Bugfix

v1.6.26 (2024-02-01)

• Add $(selector).modify() and $(selector).increase() to quickly modify the value or text of the target element.
• $(selector).boolean() now permits only one element selected.

v1.6.25 (2024-01-31)

• Bugfixes

v1.6.24 (2024-01-29)

• Minor optimization.

2024-01-22

• Add $(selector).isBlank() and $.isBlank() to evaluate whether parameter or the value of the target dom is undefined, null or blank.
• Prevent elements being re-enabled if they are not disabled by [data-display] event.

2024-01-10

• Add $(selector).boolean() to evaluate the boolean value of an element.

2024-01-06

• Add $(selector).readonlyCheckable() to make checkbox or radio elements readonly if they are unmodifiable.

2023-12-12

• [data-display] now bind event on $(document)

2023-12-12

• [data-display] event cannot be triggered when assigned an empty value for checkbox elements fixed.

2023-12-07

• [data-check-field] event now can be chained-triggered.

2023-12-06

• [data-display] event now disabled all elements when hidden.

2023-12-05

• bugfix

2023-12-04

• [data-display] event can accept multiple target values.

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.