JQuery Two Way bindings (bidirectional data binding plugin)

JQuery Bindings

Https://github.com/petersirka/jquery.bindings

This is a simple jquery two-way binding library. This plug-in connects HTML elements to the model. For web development is a small, powerful cannon.

Simple JQuery, the bindings. This plugin joins HTML elements with a model and in reverse. This plugin was a Little Big cannon for the web development.

• CLICK here-jcomponent
• Easy-to-use
• Minified only one KB (without GZIP compression)
• Great functionality
• Great use
• Works with JQuery 1.9+
• Works in IE 7+
• DEMO EXAMPLE

For specific examples, see:

Http://source.858project.com/jquery-bindings-demo.html

Working mode:

Connect HTML elements and JS objects according to the Data-model property.

The value of Data-model is the property name of the JS object.

In the general control INPUTS class selects classes and Textareas controls use two-way binding to take effect; the values of these controls are modified, and the model (the value of the JS object is updated).

How

does it works?

• Plugin connects a JavaScript object with HTML elements according to Data-model attribute
• Data-model must contain object property name
• In INPUTS, selects and Textareas plugin uses, bindings
• Model is updated if is changed value in a Input/select/textarea or manually

DEMO CODE

HTML attributes:

<DivId="Container"Data-name="My-model-1"><div><InputType=The text"Data-model=The property"/></div><DivData-model=The property"></div><DivData-model="Property.next.property"></div><DivData-model= "Created" data-format= "Your-custom-format" ></div>< div data-model= "tags  "data-custom=" Your-custom-identificator "></div>< Div data-model= "Html" data-encode= "False" ></< Span class= "pl-ent" >div></DIV>         

• Data-name= "{String}" is a container name
• Data-encode= "{Boolean}" enable HTML encoding/decoding string (default:true)
• Data-format= "{String}" calls $.bindings.format () delegate
• Data-custom= "{String}" calls $.bindings.custom () delegate

$.bindings (' Create ') (model, [template]);

Create bindings.

$(' #form‘).Bindings' Create') ({firstname:' Peter', LastName:' Širka‘ });or (XHR)$(' #form‘).Bindings' Create') ({firstname:' Peter', LastName:' Širka‘ },'/my-form.html‘);or (HTML)$(' #form‘).Bindings' Create') ({firstname:' Peter', LastName: ' širka '},  <input type= "text" data-model= "FirstName"/><span>your FirstName: <b data-model= "First-name" ></ B></span>//or (SELECTOR) $ ( bindings ( ' Create ") ({FirstName  ' peter ' Širka '}, < Span class= "Pl-pds" > ' #template-selector         

JQuery Two Way bindings (bidirectional data binding plugin)