LaterJS
LaterJS is a tool that does just what it promises!
A self-education oriented tool that shows my capabilities.
This tool is a lightweight JS framework with full two-way data binding and basic AJAX methods to communicate with server.
Fully documented version can be downloaded here: later.js v. {{version}} [61kB]
A minified version is available here: later.min.js v. {{version}} [17kB]
Project can be found on a Bit Bucket's Git: Bit Bucket - a home of LaterJS
created by: Marek. J. Kolcun
LaterJS 101
This simple FW uses scope to the HTML document via data attributes: data-ljs-s. Every document element with this attribute is parsed as documents' section and treated independently from the other sections.
Every section is a self-sufficient closure that has three main sub-closures: view, call and ctrl.
A view closure operates directly with a HTML documents' DOM. Parses the DOM and replaces the inline LaterJS snippets with a corresponding variable values.
A ctrl closure operates with the variables themselves. Every inline LaterJS snippet is parsed and its name is used as name of a newly created variable that exist in local scope of a section. Those variables can be changed, erased and updated either directly via javascript code or through callback functions defined in...
... a call closure. Via this closure can be un/registered and managed all the callback functions that are called whether any change to the sections' variable is made. Callback functions can be binded either to the section as is or to the speciffic section's variable.
1. Start simple
When you try to type into this input field, the same content will be parsed and sent to HTML template to the target place.
Every input element has native event binding to input.
This is also great example of using the templating tags. Simply insert into HTML source code a {{variable}} string.
Right after initializing body of page a variable named "variable" will be created into the current section's scope.
2. Let's try radio buttons
The radio and check buttons work almost identically. However, radio buttons are easier to understand, as there can be only one active value set to the radio button variable.
When radio button is not clicked, a variable created from radio element has empty value. Right after first click a clicked element's value is set to variable.
3. What about checkboxes?
Checkboxes are a little bit trickier. As we know, we can click multiple checkboxes.
As in case of radio buttons, when no element is checked, a default value of checkbox-created variable is an empty string.
If there is ony one checked element (in a group of checkboxes with the same name), only a single value is set to the checkbox.
Otherwise an array is created, containing all the checked values.
As you can see, all written values are written just as you check and uncheck them.
4. Aaand select box
The most complex part of form elements is a select element.
Selects can be either with single or multiple choices for selection.
When single selection is available, only a single value is set to the variable.
Otherwise, just like in checkboxes, an array of selected values is created.
5. Element attributes
Some attributes contain data that can interfere with other parts of code or can cause an Error.
For example, when you dynamically enter the src attribute to the image element.
That's when a later's attributes come to play!
Simply set prefix to the attribute and the whole attribute will be processed during initialization. No more errors!
This image was loaded with a 3 second delay. Check the code.
6. Adding some callbacks
In LaterJS you can bind any anonymous function as callback, that will be triggered in every update of the section.
If you define a variable scope of a section, a callback function will be binded only to the change of specified variable.
In the following example we made a binding function to the checkbox that presets value of readonly-input element. Just try it!
7. Just bindings
As we can see, all standard form elements and variables too can have binded some callback functions when an eventListener is triggered. But what if I want only to run a script?
It would be really stupid to create variable just to assign a callback functions to it.
Just for that reason there are available listeners!
Listeners are defined via data-ljs-l attribute. Then standard eventListener will be assigned to them and when triggered, they run a list of functions defined just for them.
8. AJAX in action
LaterJS can process a quite complex set of AJAX-related methods. You can load a section's data variables througout AJAX result, load the template and much more.
in this example you can see, that string written in textarea was set with AJAX post method and result is enriched with some text processed on the server side.
9. Filling the content in cycle
Sometimes, there is a need to generate a content based on a list of data. For example, list of products in e-shop, orders in restaurant etc. To create such a list of generated HTML content there is a simple snippet: {{template in list}}.
See? Simple. It basically says that for each object element in array will be generated a content that uses all the variables stored in this element.
For a demonstration over there was created a following template:
<template name="example_09">
<li>{{value}}.</li>
</template>
Then a snippet was set into a section's DOM tree: {{ example_09 in list}}.
Finally, a list of values was created in JS: e8.ctrl.set('list', [{value: 1}, {value: 2}, {value: 3}]);.
1, 2, 3 and PUFF! A list of <li> elements is created!
-
{{example_09 in list}}
10. Putting parent variables into generated content
Sometimes we just need to put some other variables from default object into generated list. (Static list of items in each tab, for example.)
That's where the at prefix comes to play!
When defining the snippet, just put a "@" character before the variable that you want to grab from default object.
Variable will be then taken using the "absolute path" instead of relative.
{{@parentsList}}
{{template in @parentsList}}
Generated list
-
{{example_10 in list}}