ange007/jquery-mydata

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

0.2.1 2018-09-25 18:44 UTC

README

Latest Stable Version Total Downloads License Build Status

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

Install

Composer:

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

Bower:

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

Initialize

$( /* parentElement */ ).myData( /* data and event object */, /* callback from all actions */ );
$( /* parentElement */ ).myData( /* options object */, /* callbacks object */ );
$( 'body' ).myData( object, function( type, element, propName, value ) { ... } );
$( 'body' ).myData( { event: eventObject, data: dataObject }, function( type, element, propName, value ) { ... } );
$( 'body' ).myData( data, {
	main: function( type /* event type */, element, propName, value ) { ... }, // Main callback from all actions
	set: function( element, propName, value ) { ... }, // Callback from SET action
	get: function( element, propName, value ) { ... }, // Callback from GET action
	on: function( element, propName, value ) { ... } // Callback from ON action
} );

Options

  • event (object) - object for [data-on] actions.
  • data (object) - object for [data-bind] actions.
  • exlusive (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')
    • event-value (string, default: 'data-on-value')
    • data (string, default: 'data-bind')

Uses

{
	var data = { 
		'time': getTime( ),
		'check': false,
		'test': function( msg ) { alert( 'Test alert: ' + msg ); }
	};

	$( 'body' ).myData( data, function( type, element, propName, value )
	{
		if( key === 'text' ) { $( '#text-output' ).html( value ); }
		else if( key === 'check' ) { $( '#text-input' ).attr( 'disabled', !value ); }
	} );
}
<span data-bind="time"></span>
<input type="checkbox" data-bind="check"/>
<label><b>Text input:</b></label> <input id="text-input" type="text" data-bind="text"/>
<div>You write: "<span id="text-output">*</span>"</div>
<a href="#" class="button" data-on="click:test( 'message' )">Test</a>
<input type="checkbox" data-on="console.warn( 'click' )"/>
<input type="checkbox" data-on="[ click: console.warn( 'click' ), change: console.warn( 'change' ) ]"/>