Refs

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>