Hello and welcome to part 4 of the first of the three weekly lessons about Oracle
JET. In the previous parts, you were introduced to Require, which is an open
source library found in every Oracle JET application. In this part, you'll be
introduced to Knockout, which is also found in every Oracle JET application.
Like Require, Knockout is a free and open source library. Also like Require,
Knockout is focused on providing one specific feature. While you have learned
that Require focuses specifically on modularity and lazy loading application
resources, Knockout focuses specifically on the binding of data
between the view in HTML and the viewModel in JavaScript. This is referred to
as two-way data-binding. We're now going to go to knockoutjs.com and explore the
website and the related documentation. Here we are on knockoutjs.com. Scroll
through the page and notice the key features that Knockout provides:
declarative bindings, automatic UI refresh, dependency tracking, and
templating. These are topics that you will learn about throughout this course.
There's a download and install area, which you don't need since JET includes
Knockout by default. There's a large section of tutorials and learning
resources, including live examples, that show you the key features and the key
usages of Knockout. Notice the documentation section, also very detailed,
browse through it and learn from it. Go to the Forum, where you can ask questions,
and discuss the usages of Knockout, and also the source of knockout is available
on GitHub. Knockout introduces an application architecture called Model-
View-Viewmodel (MVVM). In this architecture, we have three layers in your application:
a “view” which is the HTML file, a “viewModel”, which is the business logic in
Javascript, and a “model”, the data manipulation via REST or other web
service interfaces. With Knockout, we now have a mechanism to connect business logic
to an HTML page.
Let's create our first observable. You will name the observable “name” and this
is how observables are defined by means of ko.observable or ko.observableArray.
Type ko.observable and we will specify a default value. This is a
property in Knockout. Knockout itself will observe the property and make sure
to notify all places where this property is referenced. Let's now reference this
property on the HTML side of the Dashboard module. We create a new “span”
element and we use the “data-bind” attribute from Knockout to bind the "text"
attribute of the “span” element to the “name” property that we have defined in
our JavaScript. And to make it extra clear, we're going to surround this with
an H2 element. We look in the browser and we see our name “Tom” there. Now we can
have more references to that same property and all of those references
will display the same value. Let's now take the next step and enable the user
to change the property. We're going to change our “span” element to an “input” and
the property that we will bind will not be the “text” attribute, because an “input”
element doesn't have that. Instead, we're going to use the “value” attribute of the
“input” element and bind that to the “name” property. When the user makes a change,
inside of the “input” element, that change will mean a change to that underlying
property. the ko.observable with the name "name" and the impact of that will
be that these two "span" elements will automatically change, as well. When you
make a change and tab out, notice that the property
is updated, and all references are updated as well. You may want to change
the property while typing and for that reason we have the attribute "textInput"
which means that as we type something different, you will see that each
character results in a change to the property and all the references being
updated at the same time. You now have a very basic understanding of Knockout
enabling you to understand how properties defined in JavaScript can be bound to
the view defined in HTML. For the homework exercise, you're going to spend
some time learning about Knockout. Go to learn.knockoutjs.com and complete the
online tutorials that you will find there. And as always, we thank you for
spending time learning about Oracle JET and look forward to seeing you in the
next part.