Hello and welcome to part 6 of the first of the three weekly lessons about Oracle
JET. In the previous part, you were introduced to Oracle JET components. Each
Oracle JET component consists of business logic in JavaScript and a view
expressed in HTML. In this part, you will learn about the Require.js Text Plugin
Library, which is an extension of Require. Require Text is another useful, free, and
open source library that is part of JET. Require.js Text lets you load text
resources. In JET, Require.js Text lets you separate your HTML templates from your
JavaScript files. By separating your business logic from your templates,
you're able to separate the concerns of business logic from those of the view.
For example, UI designers can independently work on the user interface
of an application, while JavaScript developers work on the
underlying business logic. As a first example of the usefulness of the
Require.js Text functionality, we're going to replace this hard-coded set of data
with data coming from a file. Right now, the data is inside the “incidents.js” file.
I'm going to copy it and I'm going to paste it into a new file, into a JSON
file, that I will call “data”, which will be inside of a folder also called “data”. Of
course, the file and the folder could have any name at all. I'm going to paste
this in here and then add quotation marks around each of the texts that
don't have a quotation mark, to make it valid JSON. Once I have done that,
just to make it look a little bit better, I'm going to format it. Now we have a
JSON file. The point of the exercise here is to incorporate the data found in this
file inside of our Oracle JET module. The way to do that is to use Require.js Text.
So, we start by, first of all, parsing a payload that we will call
that doesn't exist right now. Take note here that "JSON.parse" works fine
though you are recommended to use the "jQuery.getJSON" call to get any JSON
data. This approach, also used throughout Oracle JET's documentation, allows for
the code to wait for a promise to be returned, before continuing with the rest
of the code that may require the data to be present. Also note that the Require.js
Text Plugin allows you to load local resources from the file system, as a text
string, and then manipulate it as needed. While you could use an AJAX call to load
local JSON data, using something like "getJSON" from jQuery, you can also use this
alternative method with a simple Require Text Plugin call. You could use
this to load static HTML fragments or even CSS style information. We're going
to put in the callback function of our "define block" the parameter "file", which
right now is not defined, and we can see that it is the fourth parameter. One, two,
three, four. Up until this point we have not discussed "function callbacks" yet.
This is part of the "define block" and also part of a "require block". We can see
that we have four different items right now, referenced in our "define block". The
order in which these items are referenced should reflect the same order
as in which they are used within the "callback function". Right now, the "file"
item is the fourth item and, therefore, our first, second, third, fourth item
should be a reference to that "file". The way that we reference the "file" is by
means of the "text!" protocol, which comes from the Require.js Text Plugin. If Oracle
JET did not include Require.js Text, we would not be able to use this
protocol here. Text with the exclamation mark, followed by the name of the folder,
relative to the "js" folder, followed by the name of the file, "data.json".
When you look in the browser, we will see that the Require.js Text Plugin loads
"data.json", that it is passed in to the "callback function" as "file", and that that
reference inside of our "JSON.parse" is that same "file" that is referenced
inside of our "callback function" and hence that our data is loaded. Back in
the browser, we see the same result as before, with the difference that, thanks
to Require.js Text, the data is now loaded from a file rather than being hard-coded
directly inside of our Oracle JET module. In short, Require.js Text is useful when
you want to load files into an Oracle JET module. The Require.js Text Plugin is
also used internally within Oracle JET. You may have been wondering why
"dashboard.js" and "dashboard.html" are loaded together as the Oracle JET
"dashboard" module and why "incidents.js" and "incidents.html" are loaded
together as the Oracle JET "incidents" module. How that happens and what makes
that possible is something called "ojModule". "ojModule" is used inside of the
index file. You will see within the index file that there is a reference in the
"main" part of the index file to a "data-bind" set to "ojModule". You've seen "data-bind"
being used before. "data-bind" is an attribute provided by Knockout. You've
seen the "data-bind" attribute being used to connect the "text" attribute of a "span"
element, for example. You have also seen it being used together with the
definition of Oracle JET components. Here you see a different binding
provided by Oracle JET, called "ojModule". This is a binding provided by
Oracle JET to enable the loading of our Oracle JET modules. Here you see that
"ojModule" points to something called a "router", which is a topic that we
will look at later. The "router" is defined in the "appController" JavaScript
file. You can see a set of keys: "dashboard", "incidents", "customers", and "about", which is
the way by means of which, by default, the "ojModule" binding loads Oracle JET
modules. For each of these keys, "ojModule" is going to look inside of the "js/viewModels"
folder for a matching JavaScript file, and in the "js/views" folder for a
matching HTML file. You can override this behavior, but this is the default way in
which "ojModule" works, using under the hood, the Require.js Text Plugin to load
together, as one, the "dashboard.js" file and the "dashboard.html", as an Oracle
JET module. The "ojModule" binding enables a separation of concerns between
business logic in JavaScript and the view defined in HTML. In this part, you
have learned about the benefits of separating the business logic from the
view of your JavaScript applications, together with the support that Require.js
Text provides. For your homework, we recommend you explore these concept
further and, as always, we thank you for taking part in the course and look
forward to seeing you in the next part.