Refs

docs/md/components/input.md

@@ -0,0 +1,5 @@
+# I-Input
+
+<i-codepreview>
+    
+</i-codepreview>

docs/md/components/iui-element.md

@@ -22,3 +22,8 @@ When the document is loaded or new HTML is inserted in the document, IUI process
     Render invokes the data binding functions and sets the element text nodes and attributes to the value returned by the binding functions. The process is recursive to all children in the element tree (**IUIElement** and **HTMLElement**)
 
 The rootElement is the first `<i-app>` in the document when its loaded.
+
+
+# Extension to the Scope
+
+IUI components might extend the scope with 

docs/md/getting-started/data-flow.md

@@ -1,7 +1,9 @@
 # Data flow
 
+
 When the :data attribute is set to an element any other attribute and child will be able to access this field directly using the variable *data* or the shortended *d*.
 
+It is a scope variable responsible for the rerendering process of the view when the value provided implements **Modifiable** interface, such as the Esiur distributed objects.
 
 <i-codepreview>
     <div :data="{name: 'Ahmed Zamil', job: 'Developer'} ">

docs/md/getting-started/referencing.md

@@ -1,2 +1,20 @@
 # Referencing
 
+To avoid duplication, IUI relies on referencing instead of element id.
+
+Refs is a scope variable contains a collection of every element in the tree, unless overwritten by another component.
+
+<i-codepreview>
+    <button @click="refs.modification.innerHTML = new Date()">Click me</button>
+    <div>Last modification : </div><div ref="modification"></div>
+</i-codepreview>
+
+When a duplicated referecing happens, the key in the refs collection will represent an array of the duplicated elements. *note: this always happends in I-Repeat components*
+
+<i-codepreview>
+    <button @click="refs.name[0].innerHTML = 'Zak'; refs.name[1].innerHTML = 'Bilal'">
+        Click me
+    </button>
+    <div>First Name : </div><div ref="name"></div>
+    <div>Last Name : </div><div ref="name"></div>
+</i-codepreview>

docs/md/getting-started/scope.md

@@ -10,4 +10,15 @@ These variables propagate from an element to its children and could be altered o
         <div>Date: ${now.toDateString()}</div>
         <div>Time: ${now.toTimeString()}</div>
     </div>
-</i-codepreview>
+</i-codepreview>
+
+# Events
+
+Events can access scope variables when declared with *@eventName*
+
+<i-codepreview>
+    <div :scope="{now: new Date()}">
+        <button @click="this.innerHTML = now">Click me</button>
+    </div>
+</i-codepreview>
+

docs/md/getting-started/scripts.md

@@ -0,0 +1,38 @@
+
+#Scripts
+
+Scripts within tags are executed as functions with the scope varaiables and *this* argument is set to the parent element
+
+<i-codepreview>
+    <button>
+        <script>
+            this.onclick = () => { alert("Hello World !")};
+            this.innerHTML = "Click me";
+        </script>
+    </button>
+</i-codepreview>
+
+When the function returns an object it will be projected to the parent element.
+
+<i-codepreview>
+    <button>
+        <script>
+            this.onclick = () => { alert("Hello World !")};
+            return {innerHTML: "Click Me"}
+        </script>
+    </button>
+</i-codepreview>
+
+Scope variables example
+
+<i-codepreview>
+    <button>
+        <script>
+            this.onclick = () => { 
+                refs.msg.innerHTML = new Date().toTimeString();
+            };
+            return {innerHTML: "Click Me"}
+        </script>
+    </button>
+    <div ref="msg"></div>
+</i-codepreview>