jquery.databind.js

A plugin for data binding and related auto-configuration
View and get the source code on Github

提供数据绑定及相关功能的小插件
在Github上查看源码

[data-bind]

Add the attribute [data-bind="[$fieldName]"] to most kinds of elements to enable automatic configuration.

大多数标签可通过添加属性[data-bind="[$fieldName]"]以开启数据绑定配置.

<input type="text" data-bind="field1">
<textarea data-bind="field1"></textarea>
<span data-bind="field1"></span>
<select data-bind="field1">
	<option value=""></option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<input type="radio" name="field1-radio" value="1" data-bind="field1">
<input type="radio" name="field1-radio" value="2" data-bind="field1">
<input type="radio" name="field1-radio" value="3" data-bind="field1">

[data-bind-checkbox-text]

Checkbox elements are unable to initiate this event because of their multi-selectability, unless with [data-bind-checkbox-text="[$value]"] property.

由于checkbox是可多选的,点击checkbox标签无法传递绑定值,但可以通过添加属性[data-bind-checkbox-text="[$value]"]来实现功能.

<input type="checkbox" name="field1-checkbox" value="1" data-bind="field1">
<input type="checkbox" name="field1-checkbox" value="2" data-bind="field1">
<input type="checkbox" name="field1-checkbox" value="3" data-bind="field1">
<input type="checkbox" name="field2-checkbox" value="1" data-bind="field2" data-bind-checkbox-text="checked">
<input type="text" data-bind="field2">

[data-bind-option-text]

Add the attribute [data-bind-option-text] to bind the option text of the other source in group instead of its exact value to this DOM element.
You can also use a specified element property as binding text using [data-bind-option-text="[$propertyName]"].

如果你想绑定的不是option标签的值本身,而是其展示的内容,可以通过添加属性[data-bind-option-text]来实现.
你也可以通过[data-bind-option-text="[$propertyName]"]来指定具体要绑定标签的哪个属性.

<select data-bind="field3">
	<option value=""></option>
	<option value="1" data-display-content="display content 1">label 1</option>
	<option value="2" data-display-content="display content 2">label 2</option>
	<option value="3" data-display-content="display content 3">label 3</option>
</select>
<input type="text" data-bind="field3">
<input type="text" data-bind="field3" data-bind-option-text>
<input type="text" data-bind="field3" data-bind-option-text="data-display-content">

[data-check-field]

Add the attribute [data-check-field="[$name]"] to a button or a checkbox element to control the check status of a set of checkboxes.

为标签添加属性[data-check-field="[$name]"]可以让你通过某一个按钮或者checkbox来控制一组checkbox的选中状态.

<input type="checkbox" data-check-field="field4">
<input type="checkbox" name="field4" value="1">
<input type="checkbox" name="field4" value="2">
<input type="checkbox" name="field4" value="3">

Add the attribute [checked] to specify the check action when using a button as the controlling element.

如果你想单向控制选中状态,就在控制按钮的标签上添加属性[checked]

<input type="button" data-check-field="field5" checked value="check">
<button type="button" data-check-field="field5">uncheck</button>
<input type="checkbox" name="field5" value="1">
<input type="checkbox" name="field5" value="2">
<input type="checkbox" name="field5" value="3">

Support [*], [^] and [$] characters for a more flexible way to specify the name of the target checkboxes.

该功能支持模糊匹配规则[*][^][$]

<input type="checkbox" data-check-field="eld6$">
<input type="checkbox" name="field6" value="1">
<input type="checkbox" name="field6" value="2">
<input type="checkbox" name="field6" value="3">

[data-display] / [data-hide]

Add the attribute [data-display="[$name]:[$value]"] to a DOM element to control its display status according to the value of the specified DOM elements.
This function does not support fuzzy match as the function [data-check-field].

为标签添加属性[data-display="[$name]:[$value]"]以通过某个标签的值来控制被添加了该属性的标签的显示状态.
该功能并不像[data-check-field]功能一样支持模糊匹配.

display content 1: abcd display content 2: dcba
<span data-display="field7:1">display content 1: abcd</span>
<span data-display="field7:2">display content 2: dcba</span>
<input type="radio" name="field7" value="1" checked>
<input type="radio" name="field7" value="2">

Use the attribute [data-hide="[$name]:[$value]"] to do the opposite.
Notice that if both exist, display is executed in preference to hide.

[data-hide="[$name]:[$value]"]属性具有相同的功能,但显示状态与前者相反.
请注意,如果两个属性同时存在,则显示的优先级高于隐藏.

display content 1: abcd display content 2: dcba
<span data-hide="field8:1">display content 1: abcd</span>
<span data-display="field8:1" data-hide="field8:1">display content 2: dcba</span>
<input type="radio" name="field8" value="1" checked>
<input type="radio" name="field8" value="2">

This attribute supports multiple target values in the format of [data-display="[$name]:[[$value1],[$value2]]"].

可以通过[data-display="[$name]:[[$value1],[$value2]]"]的形式绑定多个目标值.

display content 1,3: abcd display content 2: dcba
<span data-display="field9:[1,3]">display content 1,3: abcd</span>
<span data-display="field9:[2]">display content 2: dcba</span>
<input type="radio" name="field9" value="1" checked>
<input type="radio" name="field9" value="2">
<input type="radio" name="field9" value="3">

[data-enable] / [data-disable]

Add the attribute [data-enable="[$name]:[$value]"] or [data-disable="[$name]:[$value]"] to do similar as display and hide event, but only affect [disabled] property instead of display status.

[data-enable="[$name]:[$value]"][data-disable="[$name]:[$value]"]属性可以做到与前面类似的事,但只控制标签的[disabled]属性,而不控制其显示状态.

<input type="text" data-enable="field11:1" value="test string">
<input type="radio" name="field11" value="1" checked>
<input type="radio" name="field11" value="2">
<input type="text" data-disable="field12:1" value="test string">
<input type="radio" name="field12" value="1" checked>
<input type="radio" name="field12" value="2">

[data-display-hide-callback]

Add the attribute [data-display-hide-callback="[$functionName]"] to invoke the specified function as a callback when the DOM element is hidden or disabled.

为标签添加属性[data-display-hide-callback="[$functionName]"]可以在该元素被隐藏或禁用时调用已经定义的js函数.

display content 1: abcd display content 2: dcba
times content1 hidden: 0
<span data-display="field10:1" data-display-hide-callback="test1">display content 1: abcd</span>
<span data-display="field10:2">display content 2: dcba</span>
times content1 hidden: <span id="test1Result">0</span>
function test1() {
	$("#test1Result").increase();
}
<input type="radio" name="field10" value="1" checked>
<input type="radio" name="field10" value="2">

[data-unchecked-value]

Add the attribute [data-unchecked-value="[$value]"] to submit a default value when a checkbox element is not checked instead of submitting nothing.

为标签添加属性[data-unchecked-value="[$value]"]可以为单个checkbox添加未被选中时的默认值,防止其在未被选中时不将任何值提交到后端.

submitting value: 1
<input type="checkbox" name="field29-checkbox1" value="1" checked data-unchecked-value="0">

.display-only

Add the class "display-only" to an input or select element to display its content as a read-only span element that is not editable and not visible.

为input或select等标签添加class:"display-only"可以让他们仅把值显示在页面上,避免被轻易修改.

<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="field13" class="display-only" value="1">
<input type="radio" name="field13" class="display-only" value="2" checked>
<input type="radio" name="field13" class="display-only" value="3">
<input type="checkbox" name="field14" class="display-only" value="1">
<input type="checkbox" name="field14" class="display-only" value="2" checked>
<input type="checkbox" name="field14" class="display-only" value="3" checked>

$().readonly() / $().removeReadonly()

If checkbox, radio or select elements are unmodifiable in HTML for some reason, invoke $([$selector]).readonly() to make them unselectable via js code.
Notice that they are just unable to be selected instead of having a [readonly] or [disabled] attribute.
These elements will have class "readonly-item" for your customized styles.

可以通过调用$([$selector]).readonly()方法来让checkbox、radio或select标签变成只读,不可编辑.
这种方法只会让标签不可编辑,而不会为其添加[readonly][disabled]属性,不会影响其提交值.
这些标签会被添加class:"readonly-item",以允许为其制定自定义css样式等.

<input type="text" class="readonly-group" name="field31" value="test string">
<input type="radio" class="readonly-group" name="field15" value="1">
<input type="radio" class="readonly-group" name="field15" value="2" checked>
<input type="radio" class="readonly-group" name="field15" value="3">
<input type="checkbox" class="readonly-group" name="field16" value="1">
<input type="checkbox" class="readonly-group" name="field16" value="2" checked>
<input type="checkbox" class="readonly-group" name="field16" value="3" checked>
<select class="readonly-group" name="field30">
	<option value=""></option>
	<option value="1" selected>label 1</option>
	<option value="2">label 2</option>
	<option value="3">label 3</option>
</select>
function readonly() {
	$(".readonly-group").readonly();
}

Invoke $([$selector]).removeReadonly() to remove these effects.

通过调用$([$selector]).removeReadonly()方法来取消只读.

function removeReadonly() {
	$(".readonly-group").removeReadonly();
}

$().boolean()

Invoke $([$selector]).boolean() to evaluate the boolean value of an element. Returns null if it is unparseable.

通过调用$([$selector]).boolean()方法来获取标签中包含的boolean值.如果不包含boolean值则返回null

<input type="text" id="field17" value="true">
<input type="text" id="field18" value="123">
let field17Boolean = $("#field17").boolean(); // field17Boolean = true
let field18Boolean = $("#field18").boolean(); // field18Boolean = null

A boolean test value can be passed in when evaluate whether the element reserves the target boolean value.

如果调用方法时传入了boolean值,则方法返回值为:标签中包含的boolean值与传入的boolean值是否等同.

<input type="text" id="field19" value="false">
<input type="text" id="field20" value="123">
let field19Boolean = $("#field19").boolean(false); // field19Boolean = true
let field20Boolean = $("#field20").boolean(true); // field20Boolean = false

$().isBlank() / $.isBlank()

Invoke $([$selector]).isBlank() to evaluate whether the value of the target dom is blank.

通过调用$([$selector]).isBlank()来判断一个标签中是否包含任何形式的内容.

<input type="text" id="field21">
<input type="text" id="field22" value="123">
let field21Blank = $("#field21").isBlank(); // field21Blank = true
let field22Blank = $("#field22").isBlank(); // field22Blank = false

Invoke $.isBlank() to evaluate whether parameter is undefined, null or blank.

通过调用$.isBlank()方法来判断目标值是否为undefined, null或空字符串等.

<input type="text" id="field23">
let field23Blank = $.isBlank($("#field23").val()); // field23Blank = true
let field24Blank = $.isBlank('1234'); // field24Blank = false

$().isChecked()

Invoke $([$selector]).isChecked() to evaluate whether the target checkbox or radio element is checked.

通过调用$([$selector]).isChecked()来判断一个checkbox或radio标签是否被选中.

<input type="checkbox" name="field32" value="1" checked>
<input type="checkbox" name="field32" value="2">
<input type="radio" name="field33" value="1" checked>
<input type="radio" name="field33" value="2">
let isField32Checkbox1Checked = $("#field32-checkbox1").isChecked(); // isField32Checkbox1Checked = true
let isField32Checkbox2Checked = $("#field32-checkbox2").isChecked(); // isField32Checkbox2Checked = false
let isField33Checkbox1Checked = $("#field33-checkbox1").isChecked(); // isField33Checkbox1Checked = true
let isField33Checkbox2Checked = $("#field33-checkbox2").isChecked(); // isField33Checkbox2Checked = false

$().modify() / $().increase()

Invoke $([$selector]).modify([$function]) or $([$selector]).modify([$prependString], [$appendString]) to to quickly modify the value or text of the target element.

通过调用$([$selector]).modify([$function])$([$selector]).modify([$prependString], [$appendString])方法来快速修改标签中的字符串.

<input type="text" id="field25" value="test">
<input type="text" id="field26" value="test">
$("#field25").modify(value => 'prefix ' + value + ' suffix');
$("#field26").modify('prefix ', ' suffix');

Invoke $([$selector]).increase() or $([$selector]).increase([$increaseValue]) to to quickly modify the numeric value or text of the target element.

通过调用$([$selector]).increase()$([$selector]).increase([$increaseValue])方法来快速修改标签中的数值.

<input type="text" id="field27" value="1">
<input type="text" id="field28" value="1">
$("#field27").increase();
$("#field28").increase('-10');