File README.md

Last commit: Wed Jul 14 23:35:50 2021 +0200	Jan Dankert	Documentation.


     1 # Bindify-JS
     2 
     3 This is a lightweight javascript 2-way-data-binding framework, implemented as a Jquery-Plugin.
     4 
     5 ## Advantages
     6 
     7 - Really lightweight, ~ 1kB (minified and gzipped)
     8 - does not need any [CSP](https://en.wikipedia.org/wiki/Content_Security_Policy) permissions.
     9 - 2-way-binding
    10 
    11 
    12 ## Disadvantages
    13 
    14 - Need for [JQuery](http://jquery.com).
    15 
    16 ## Usage
    17 
    18 ### HTML element binding
    19 
    20 Bind text content
    21 
    22     <p>The name is <span data-binding-text="person.name"></span>
    23 
    24 2-way-binding values for input elements
    25 
    26     <form><input data-binding-value="person.name" /></form>
    27 
    28 Bind attributes for a HTML element
    29 
    30     <span data-binding-attributes="{&quot;class&quot;:&quot;styleClass&quot;}" />This element gets a style class</span>
    31 
    32 Binding lists
    33 
    34     <ul>
    35       <li data-binding-list="{&quot;list&quot;:&quot;names&quot;, &quot;var&quot;:&quot;name&quot;}" data-binding-text="name">
    36       </li>
    37     </ul>
    38 
    39 ### JS application
    40 
    41     $data = { "person": {"name":"Sarah Connor"},
    42               "names": {"Sarah","John","Arnold"},
    43               "styleClass":"anyCSSClass",
    44             };
    45     $('body').bindify( $data );
    46     
    47 ### Settings
    48 
    49 You are able to set some configuration settings for the plugin:
    50 
    51 - `updateDOM`: Should the DOM elements be updated after the data model has changed? Default: yes.
    52 - `updateModel`: Should the data model be updated after user input? Default: yes.
    53 - `prefix`: Prefix for data binding attributes. Default: 'binding'.
    54 - `debug`: the debug mode is logging to the browser console. Default: off.
    55 - `updateEvent`: the event, which triggers the data model update. Default: 'input'
    56 - `onUpdate`: a user callback which is called after the data model has changed.
    57 - `updateCallback`: Callback handle for propagating changes in the data model. Must be of type `JQuery.Callbacks()`!
    58 
    59 ## FAQ
    60 
    61 - Why not using Mustache for that?
    62 
    63 Yes, mustache is simple, lightweight and stable. But it is unable to re-bind new values to the UI. Yes, you may cache the template and re-execute it, but than there will be a flickering UI.
    64 
    65 - Why not using Vue.js?
    66 
    67 Vue is great, but has a big disadvantage: It needs the "eval" CSP permission, because every binded area is treated as a "template", which is compiled to a render function and then executed via eval(). I do not like this approach.
    68 
    69 - Why not using Knockout.js?
    70 
    71 Knockout is great, but has the same point as vue: It needs the "eval" CSP permission. There is a TKO-Branch of Knockout without this issue, but it is not finished yet. 
    72  
    73 - Why the dependency to JQuery
    74 
    75 Did you really believe that i'll do that without jquery? ;) JQuery is adult, stable and present in all of my projects, so why not using it?
    76 
    77 - Is it possible to rewrite this framework without jquery?
    78 
    79 Of course, yes. What are you waiting for ;)



Download README.md


History
Wed, 14 Jul 2021 23:35:50 +0200	Jan Dankert	Documentation.
Tue, 28 Jan 2020 21:53:46 +0100	Jan Dankert	Increased doc.
Tue, 28 Jan 2020 17:10:19 +0100	Jan Dankert	The first running implementation.
Mon, 27 Jan 2020 23:44:59 +0100	Jan Dankert	First commit with the initial documentation. Code arrives later ;)