JET: v6.0.0
Source: GitHub
Oracle JET gives us developers a powerful tool - knockout templates - through which we can configure an entire page, using just JavaScript object metdata. The most significant advantages of such a mechanism are re-usability and of course, ease of development.
Imagine I would like to create the below 3 forms:
To make life of developers easier, all I would want them to do is to pass the metadata (fancy name for a JavaScript object), which would contain all the information about the fields, and not worry about the UI at all. This would also ensure a consistent look and feel for the entire application.
So let's see how such a template works. Each template has a declaration section and a definition section.
In the template declaration, I would specify where in my HTML page would I want the template code to be placed.
The template definition defines the exact implementation of the HTML code. It makes use of the metadata to position the HTML elements, which ultimately gives shape to the UI.
To make it a bit easier, I have wrapped up the template inside a custom component, to make repitition simpler. This is the metadata I am passing to the template in order to get the desired structure:
Cheers!
Source: GitHub
Oracle JET gives us developers a powerful tool - knockout templates - through which we can configure an entire page, using just JavaScript object metdata. The most significant advantages of such a mechanism are re-usability and of course, ease of development.
Imagine I would like to create the below 3 forms:
To make life of developers easier, all I would want them to do is to pass the metadata (fancy name for a JavaScript object), which would contain all the information about the fields, and not worry about the UI at all. This would also ensure a consistent look and feel for the entire application.
So let's see how such a template works. Each template has a declaration section and a definition section.
In the template declaration, I would specify where in my HTML page would I want the template code to be placed.
 |
| Template declaration |
The template definition defines the exact implementation of the HTML code. It makes use of the metadata to position the HTML elements, which ultimately gives shape to the UI.
 |
| Template definition |
To make it a bit easier, I have wrapped up the template inside a custom component, to make repitition simpler. This is the metadata I am passing to the template in order to get the desired structure:
 |
| Custom component |
Cheers!
