jQuery.myData - Small jQuery&Zepto plugin for two-ways data binding.
Branch: release
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
.gitignore
CHANGELOG.md
CONTRIBUTING.md
LICENSE
README.md
bower.json
composer.json
index.html
jquery.myData.js
jquery.myData.min.js
package.json

README.md

JQuery.MyData

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