Simple Information Binding Plugin For jQuery – databind.js

A light-weight jQuery information bindng plugin that makes it straightforward to bind information to components utilizing solely HTML information attributes. 

The right way to use it:

1. To start with, embody 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 weather as follows:

<enter kind="textual content" data-bind="field-example">
<span class="bindSpan" data-bind="field-example"></span>
<choose data-bind="field-example">
  <possibility worth=""></possibility>
  <possibility worth="1">1</possibility>
  <possibility worth="2">2</possibility>
  <possibility worth="3">3</possibility>
</choose>
...

3. Extract the textual content from the possibility tag as an alternative of its worth attritbue:

<choose data-bind="field-otion">
  <possibility worth=""></possibility>
  <possibility worth="1">label 1</possibility>
  <possibility worth="2">label 2</possibility>
  <possibility worth="3">label 3</possibility>
</choose>
<enter kind="textual content" data-bind="field-otion" data-bind-option-text>

4. Allow a component to toggle the visibility of your components.

<enter kind="radio" identify="display-example" worth="1" checked>
<enter kind="radio" identify="display-example" worth="2">

<span data-display="display-example:1">Show content material 1</span>
<span data-display="display-example:2">Show content material 2</span>

5. Allow the Show Solely mode utilizing the display-only class.

<enter kind="textual content" class="display-only" worth="display-only enter">
<choose class="display-only">
  <possibility worth=""></possibility>
  <possibility worth="1" chosen>label 1</possibility>
  <possibility worth="2">label 2</possibility>
  <possibility worth="3">label 3</possibility>
</choose>
<enter kind="radio" identify="display-only-demo" class="display-only" worth="1">
<enter kind="radio" identify="display-only-demo" class="display-only" worth="2" checked>
<enter kind="radio" identify="display-only-demo" class="display-only" worth="3">
<enter kind="checkbox" identify="display-only-demo" class="display-only" worth="1">
<enter kind="checkbox" identify="display-only-demo" class="display-only" worth="2" checked>
<enter kind="checkbox" identify="display-only-demo" class="display-only" worth="3" checked>

6. Set checkboxes and radio buttons to readonly.

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

// take away
$("[name="radioGropu"], [name="checkGroup"]").removeReadonly()

7. Consider the boolean worth of a component. Returns null whether 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. Consider whether or not parameter or the worth of the goal dom is undefined, null or clean.

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

9. Change the textual content of the factor.

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

10. Enhance & lower the worth of the factor.

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

Changelog:

v1.9.0 (2024-06-28)

• Change technique identify from $(selector).readonlyCheckable() to $(selector).readonly().
• Change the category identify added by $(selector).readonly() from “readonly-checkable-item” to “readonly-item”.
• Logic of $(selector).readonly()’s stopping checkbox/radio click on motion modified.
• $(selector).readonly() now can merely add property [readonly] to plain enter and textarea components.
• $(selector).readonly() now helps default Chrome/Firefox disabled type for checkbox, radio and choose components.
• Add technique $(selector).removeReadonly() to take away $(selector).readonly()’s results.

v1.8.3 (2024-06-23)

• $(selector).readonlyCheckable() now helps choose components.
• $(selector).readonlyCheckable() helps bootstrap css type for choose components, different components will probably be fulfilled in later model.
• $(selector).readonlyCheckable() now provides a category “readonly_checkable_item” for custom-made kinds.

v1.8.2 (2024-06-23)

• Use ES6 template strings.
• Minor Optimization.

v1.8.1 (2024-06-12)

• [data-unchecked-value] occasion preferentially generates checkbox underneath kind factor.

v1.8.0 (2024-06-11)

• Add occasion [data-enable]/[data-disable] to do the same as [data-display]/[data-hide].
• Add occasion [data-unchecked-value] to supply a default worth when an unchecked checkbox factor is submitted.
• [data-bind] occasion now may be initiated by checkbox components, however solely when with [data-bind-checkbox-text] property.
• Demo update

v1.7.0 (2024-03-11)

• Add occasion [data-hide] to do the other of [data-display].

v1.6.29 (2024-03-11)

v1.6.28 (2024-03-05)

v1.6.27 (2024-02-04)

v1.6.26 (2024-02-01)

• Add $(selector).modify() and $(selector).enhance() to rapidly modify the worth or textual content of the goal factor.
• $(selector).boolean() now permits just one factor chosen.

v1.6.25 (2024-01-31)

v1.6.24 (2024-01-29)

2024-01-22

• Add $(selector).isBlank() and $.isBlank() to judge whether or not parameter or the worth of the goal dom is undefined, null or clean.
• Stop components being re-enabled if they don’t seem to be disabled by [data-display] occasion.

2024-01-10

• Add $(selector).boolean() to judge the boolean worth of a component.

2024-01-06

• Add $(selector).readonlyCheckable() to make checkbox or radio components readonly if they’re unmodifiable.

2023-12-12

• [data-display] now bind occasion on $(doc)

2023-12-12

• [data-display] occasion can’t be triggered when assigned an empty worth for checkbox components fastened.

2023-12-07

• [data-check-field] occasion now may be chained-triggered.

2023-12-06

• [data-display] occasion now disabled all components when hidden.

2023-12-05

2023-12-04

• [data-display] occasion can settle for a number of goal values.

2023-07-15

• Add help for jQuery’s no Battle mode.
• Add [data-bind] occasion for textarea components. 

2023-06-09

• Stop initialization of “display-only” objects in hidden templates which is wrapped by a hidden [id*=’emplate’] factor.

2023-05-30

• Rollback the modification in 1.6.7 and add a brand new class to attain the aim as an alternative.

2023-05-25

• Take away class “display-only” after prepared to stop re-triggering the appending occasion whereas utilizing different plug-ins similar to tablesorter.js.

2023-05-23

This superior jQuery plugin is developed by scintilla0. For extra Superior Usages, please verify the demo web page or go to the official web site.