README

一个小型的jQuery和Zepto插件，用于双向数据绑定。

安装

Composer

$ php composer.phar require "ange007/jquery-mydata"

Bower

$ bower install --save-dev ange007/jquery-mydata

初始化

$( /* parentElement */ ).myData( /* data and event object */, /* callback from all actions */ );

$( /* parentElement */ ).myData( /* options object */, /* callbacks object */ );

$( 'body' ).myData( object, function( type, element, propName, value, data ) { ... } );

$( 'body' ).myData( { event: eventObject, data: dataObject }, function( type, element, propName, value, data ) { ... } );

$( 'body' ).myData( data, {
	main: function( type /* event type */, element, propName, value, data ) { ... }, // Main callback from all actions
	set: function( element, propName, value, data /* [ eventType ] */ ) { ... }, // Callback from SET action
	get: function( element, propName, value, data /* [ ] */ ) { ... }, // Callback from GET action
	on: function( element, propName, value, data /* [ eventType, callArgs ] */ ) { ... } // Callback from ON action
} );

选项

• event (object) - [data-on] 动作的object。
• data (object) - [data-bind] 动作的object。
• exclusive (boolean, 默认: false) - 如果插件已经在此元素上使用过，则重新创建插件和事件监听器。
• data-keys (object) - 用于数据和事件操作的关键字
  • event (string, 默认: 'data-on')
  • value (string, 默认: 'data-value')
  • default-value (string, 默认: 'data-default-value')
  • data (string, 默认: 'data-bind')
  • data-element (string, 默认: 'data-bind-element')

用途

数据绑定（控件到对象）

{
	var data = { 
		'time': getTime( ),
		'check': false,
		'test': function( value, elementData /* [ element, elementEvent, elementValue ] */ ) { alert( 'Test alert: ' + value ); }
	};

	$( 'body' ).myData( data, function( type, element, propName, value, data )
	{
		if( key === 'text' ) { $( '#text-output' ).html( value ); }
		else if( key === 'check' ) { $( '#text-input' ).attr( 'disabled', !value ); }
	} );
}

/* Output actual time */
<span data-bind="time"></span>

/* Intercepte change state */
<input type="checkbox" data-bind="check"/>

/* Text data transfer */
<label><b>Text input:</b></label> <input id="text-input" type="text" data-bind="text"/>
<div>You write: "<span id="text-output">*</span>"</div>

动作反应

/* Function execution */
<a href="#" class="button" data-on="click:test( 'message' )">Test</a>
<input type="checkbox" data-on="console.warn( 'click' )"/>

/* Function execution (custom value) */
<a href="#" class="button" data-on="click:test" data-on-value="message">Test</a>

/* Multiple function execution */
<input type="checkbox" data-on="[ click: console.warn( 'click' ), change: console.warn( 'change' ) ]"/>

数据绑定（控件到控件）

/* Enabled control, and show block */
<input type="checkbox" value="y" data-bind-element="[enabled:#text-element-input,visible:#text-element-block]"/>

<input id="text-element-input" type="text" data-bind-element="text:#text-element-output" disabled/>
<div id="text-element-block" style="visibility: hidden;">You write: "<span id="text-element-output">*</span>"</div>