Simplify dynamic JavaScript Uis with the Model-View-ViewModel (MVVM) pattern “Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically [...], KO can help you implement it more simply and maintainable.”

1. PART 1 (BEGINS)
Simplify dynamic JavaScript Uis with the
Model-View-ViewModel (MVVM) pattern

2. “Knockout is a JavaScript library that helps
you to create rich, responsive display and
editor user interfaces with a clean
underlying data model. Any time you have
sections of UI that update dynamically [...],
KO can help you implement it more simply
and maintainable.”

3.  Declarative Binding
Easily associate DOM elements with model data using a concise, readable
syntax.
 Automatic UI Refresh
Whenever data model's state changes, UI updates automatically.
 Dependency Tracking
Implicitly set up chains of relationships between model data, to transform and
combine it.
 Templating
Quickly generate sophisticated, nested UIs as a function of your model data.

4. Free, open source
Pure JavaScript — works with any web
framework
Small & lightweight — 54kb minified
No dependencies
Supports all mainstream browsers, even
ancient ones (IE 6+, Firefox 3.5+, Chrome, Opera,
Safari (desktop/mobile))

5. MVVM
Observables
Bindings
Templates and customization

6.  The Model-View-ViewModel (MVVM) pattern is an architectural
design. Microsoft designed MVVM in conjunction with the data-
binding features in the Windows Presentation Foundation (WPF).
MVVM provides a clear separation of concerns between the user
interface (UI) and the business logic. MVVM shares a lot in common
with the Model View Controller (MVC) and Model View Presenter
(MVP) patterns.
 How does the MVVM pattern figure into the mix? The MVVM pattern
is a hybrid of the MVC and MVP patterns, bringing the best of both
together. MVVM has MVC’s separation of concern benefits and
MVP’s data binding features. MVVM is primarily focused on the UI
layer, leaving business logic to either be implemented on the server
or in the presentation layer. To understand the MVVM pattern better,
we must focus a moment on the View Model.

7. View
HTML - CSS
ViewModel
JavaScript
Model
JSON
Command
Binding
Data
Binding
Notification
Data
Presentation Layer:
Functionality behind the UI.

8. You need to declare your model properties
as observables, because these are
special JavaScript objects that can notify
subscribers about changes, and can
automatically detect dependencies.
var myViewModel = {
personName: ko.observable(‘Micro’),
personAge: ko.observable(123)
};

9. data-bind attributes in HTML
ko.observable() for the properties
ko.applyBindings() to activate bindings
var myViewModel = {
personName: ko.observable(‘Micro’),
personAge: ko.observable(23)
};
ko.applyBindings(myViewModel); // Activating Knockout
The name is <span data-bind="text: personName()"></span>
And I am <span data-bind="text: personAge() "></span> old.

10.  Native templating does not require any library
other than Knockout itself
 String-based templating works only once you’ve
referenced a suitable template engine, such as
jQuery.tmpl or the Underscore template engine.
 The template binding populates the associated
DOM element with the results of rendering a
template. Templates are a simple and convenient
way to build sophisticated UI structures - possibly
with repeating or nested blocks.

11. <h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
function MyViewModel() {
this.buyer = { name: 'Franklin', credits: 250 };
this.seller = { name: 'Mario', credits: 5800 };
}
ko.applyBindings(new MyViewModel());
</script>

12. If your actions inspire others to dream more, learn
more, do more and become more, you are a
leader.