bindify

commit 09a28f8859f890e13ba92bb9f8ef95b1def6932b
Author: Jan Dankert <develop@jandankert.de>
Date:   Mon, 27 Jan 2020 23:44:59 +0100

First commit with the initial documentation. Code arrives later ;)

Diffstat:
README.md
 | 
78
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
bindify.js
 | 
2
++
bindify.min.js
 | 
1
+

3 files changed, 81 insertions(+), 0 deletions(-)
diff --git a/README.md b/README.md
@@ -0,0 +1,77 @@
+# Bindify-JS
+
+This is a lightweight javascript 2-way-data-binding framework, implemented as a Jquery-Plugin.
+
+## Advantages
+
+- Really lightweight
+- does not need any [CSP](https://en.wikipedia.org/wiki/Content_Security_Policy) permissions.
+- 2-way-binding
+
+
+## Disadvantages
+
+- Need for [JQuery](http://jquery.com).
+
+## Usage
+
+### HTML element binding
+
+Bind text content
+
+    <p>The name is <span data-binding-text="person.name"></span>
+
+2-way-binding values for input elements
+
+    <form><input data-binding-value="person.name" /></form>
+
+Bind attributes for a HTML element
+
+    <span data-binding-attributes="{&quot;class&quot;:&quot;styleClass&quot;}" />This element gets a style class</span>
+
+Binding lists
+
+    <ul>
+      <li data-binding-list="{&quot;list&quot;:&quot;names&quot;, &quot;var&quot;:&quot;name&quot;}" data-binding-text="name">
+      </li>
+    </ul>
+
+### JS application
+
+    $data = { "person": {"name":"Sarah Connor"},
+              "names": {"Sarah","John","Arnold"},
+              "styleClass":"anyCSSClass",
+            };
+    $('body').bindify( $data );
+    
+### Settings
+
+You are able to set some configuration settings for the plugin:
+
+- `updateDOM`: Should the DOM elements be updated after the data model has changed? Default: yes.
+- `updateModel`: Should the data model be updated after user input? Default: yes.
+- `debug`: the debug mode is logging to the browser console. Default: off.
+- `afterBind`: a user callback which is called after the initial bind.
+- `onModelUpdate`: a user callback which is called after the data model has changed.
+
+## FAQ
+
+- Why not using Mustache for that?
+
+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.
+
+- Why not using Vue.js?
+
+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.
+
+- Why not using Knockout.js?
+
+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. 
+ 
+- Why the dependency to JQuery
+
+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?
+
+- Is it possible to rewrite this framework without jquery?
+
+Of course, yes. What are you waiting for ;)+
\ No newline at end of file
diff --git a/bindify.js b/bindify.js
@@ -0,0 +1,2 @@
+/*! GPLv3 */
+/* bindify JQuery databinding plugin*/
diff --git a/bindify.min.js b/bindify.min.js
@@ -0,0 +1 @@
+/*! GPLv3 */