ange007/jquery-mydata

Small JQuery&Zepto plugin for two-ways data binding.

jQuery.MyData

, _(*1)

Small jQuery&Zepto plugin for two-ways data binding., _(*2)

Install

Composer:, _(*3)

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

Bower:, _(*4)

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

Initialize

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

```javascript $( /* parentElement / ).myData( / options object /, / callbacks object */ );, <sub>(*5)</sub>

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

```javascript $( 'body' ).myData( { event: eventObject, data: dataObject }, function( type, element, propName, value, data ) { ... } );, <sub>(*6)</sub>

```javascript
$( '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
} );

Options

• event (object) - object for [data-on] actions.
• data (object) - object for [data-bind] actions.
• exclusive (boolean, default: false) - recreate plugin and event listeners if the plugin has already been used on this element.
• data-keys (object) - keys for working with data and events:
  • event (string, default: 'data-on')
  • value (string, default: 'data-value')
  • default-value (string, default: 'data-default-value')
  • data (string, default: 'data-bind')
  • data-element (string, default: 'data-bind-element')

Uses

Data Binding (control-to-object)

{
    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"/>


You write: "*"

Action Reaction

/* 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' ) ]"/>

Data Binding (control-to-control)

/* 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/>


You write: "*"