BindingUtil

BindingUtil

BindingUtils provides One-way and Two-way binding with Just single statement. Features:

  1. HTML Element to Html Element
  2. HTML Element to JavaScript Object
  3. JavaScript Object to JavaScript Object
  4. Support chain binding. Example: Input Element (binds to) -> Model Object (binds to) -> Label Element
  5. Custom property binding and event to trigger binding event.
  6. Model to View binding
  7. Built-in mechanism to prevent Memory Leak

BindingUtils is Singleton class.

Constructor

new BindingUtil()

Source:
Examples
Add Binding:

    BindingUtils.addBinding(srcele, "value", "change", destele, "value", false);

 
        
Remove Binding :

        BindingUtils.removeBinding(srcele, "value");
        
        
Chain Binding : 
        DOM Element -> JavaScript Object (or DOM) ->  DOM Element (or Javascripg Object)

        1) DOM Element -> JavaScript Object :

        BindingUtils.addBinding(srcele, "value", "change", this.myCustomModel, "setValue", false);

        2) JavaScript Object ->  DOM Element :

        BindingUtils.addBinding(this.myCustomModel, "getValue", "change", destele, "value", false);
        
        
Two-way Binding :

        BindingUtils.addBinding(srcele, "value", "change", destele, "value", true);

Classes

BindingUtil

Methods

addBinding(srcObj, srcProp, evtname, targObj, targProp, twoway)

Source:
  • Add Binding method binds Source Object property with Target Object Property with Synchronize on SourceObject Event
Example
Add Binding :
 BindingUtils.addBinding(srcele, "value", "change", destele, "value", false);
Parameters:
Name Type Description
srcObj object

Source DOM Element or Object
srcProp string

Source Property
evtname string

Source Object EventName on which Binding Trigger
targObj object

Target DOM Element or Object
targProp string

Target Property
twoway Boolean

True when Binding is Two-way

removeBinding(_srcObj, _evtname)

Source:
  • Add Binding method binds Source Object property with Target Object Property with Synchronize on SourceObject Event
Example
Remove Binding :
 BindingUtils.removeBinding(srcele, "value");
Parameters:
Name Type Description
_srcObj object

Source DOM Element or Object
_evtname string

Source Object EventName on which Binding Trigger