The EachJS syntax is easy and intuitive to lean.
The data attributes are the core attributes. They are executed when an event occurs, such as "load", "click", "key down", etc. We currently have the following data attributes:
data-ej-load
data-ej-change
data-ej-click
data-ej-rightclick
data-ej-doubleclick
data-ej-keyup
data-ej-keydown
data-ej-mouseup
data-ej-mousedown
Typical values are like:
"http://eachdataapi.azurewebsites.net/data/dot"
"/data/items"
"post:/data/items"
When the verb is missing, it defaults to "get". When it uses a relative path, it needs to pre-pended from "data-ej-base" in the tag, such as:
<body data-ej-base="http://eachdataapi.azurewebsites.net">
It also supports variables and functions, such as:
"$todolistremaining"
The input and auth (authorization) attributes are:
data-ej-load-input
data-ej-change-input
data-ej-click-input
data-ej-rightclick-input
data-ej-doubleclick-input
data-ej-keyup-input
data-ej-keydown-input
data-ej-mouseup-input
data-ej-mousedown-input
Typical values are like:
"name@#addName"
"id@#banks;key2@#branchesKey;id2;key3@#departmentsKey"
"item[][email protected];item[][email protected]"
The auth (authorization) attributes are:
data-ej-load-auth
data-ej-change-auth
data-ej-click-auth
data-ej-rightclick-auth
data-ej-doubleclick-auth
data-ej-keyup-auth
data-ej-keydown-auth
data-ej-mouseup-auth
data-ej-mousedown-auth
Typical values are like:
"(storage)accountToken"
The output attributes are:
data-ej-load-output
data-ej-change-output
data-ej-click-output
data-ej-rightclick-output
data-ej-doubleclick-output
data-ej-keyup-output
data-ej-keydown-output
data-ej-mouseup-output
data-ej-mousedown-output
Typical values are like:
"#updateItem(populate,show)"
"#addName(clear);#addItemStatus(flash<2000>)"
";.item-row:odd(addclass<green-italic>)"
"fnSetSpecs"
"(storage)-accountToken;#memberAuthorized(reload);#orders(reload)"
"[$keepLoggedIn](localstorage)accountToken"
"[length>1]#departments(,enable)"
"(url)reload"
Both of the "data-ej-model" attribute and double curly brackets can be used to bind data to elements.
The "data-ej-model" attribute puts the model in tags, while the double curly brackets put the model in inline HTML codes.
<span id="greetingName" data-ej-model="Name"></span>
<div id="unit2" data-ej-load="http://eachdataapi.azurewebsites.net/data/line">{{Name}}, then {{Text}}</div>
<p>{{chapters[].index}}.{{chapters[].title}}</p>
The "data-ej-repeat" attribute is used to loop collections:
<span data-ej-repeat>{{[].Name}}</span>
<div data-ej-repeat="chapters">...</div>
The error attributes are:
data-ej-load-error
data-ej-change-error
data-ej-click-error
data-ej-rightclick-error
data-ej-doubleclick-error
data-ej-keyup-error
data-ej-keydown-error
data-ej-mouseup-error
data-ej-mousedown-error
These attributes behave similar with teh -output attributes, but get executed when an error occurs.
Typical values are like:
"#orders(hide);#ordersNotAuthorized(show)"