esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2025-06-27 01:13:12 +00:00
Code Issues Projects Releases Wiki Activity

Refs

Browse Source
This commit is contained in:
Ahmed Zamil
2021-11-15 00:11:12 +03:00
parent 589c4f3227
commit e52b89fb4d
13 changed files with 213 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/index.html
View File

@ -1,6 +1,7 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
@ -15,7 +16,7 @@
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
@ -95,6 +96,14 @@
<i-route name="if-content" caption="Conditions and Filling" :content="load(this)">
</i-route>
<i-route name="scripts" caption="Scripts" :content="load(this)">
</i-route>
<i-route name="referencing" caption="Referencing" :content="load(this)">
</i-route>
</i-route>

5
docs/md/components/input.md Normal file
View File

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

5
docs/md/components/iui-element.md
View File

@ -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

2
docs/md/getting-started/data-flow.md
View File

@ -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'} ">

18
docs/md/getting-started/referencing.md
View File

@ -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>

13
docs/md/getting-started/scope.md
View File

@ -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>

38
docs/md/getting-started/scripts.md Normal file
View File

@ -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>