Jason/safaribook-knockout-essentials
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial Commit

Jason Zhu 2022-04-18 22:07:30 +10:00
commit 8c8830e1c4
4 changed files with 117 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
1_refreshing_the_ui_automatically_with_knockoutjs.md Normal file

@ -0,0 +1,45 @@
# Chapter 1. Refreshing the UI Automatically with KnockoutJS
KnockoutJS (ko) gives the ability to objects to become the nexus (comm center) between views (html) and models.
It uses **declarative bindings** to associate DOM elements with model data.
![MVVM-pattern diagram](imgs/7074OS_01_01.jpg)
## Summary
Objective of this chapter: Learn basic of Knockout
App dev progress:
1. Create a simple form to add products to catalog
2. Learn how to manage observable collections and display them in a table
3. Develop a search functionality using computed observables
What we learned:
* 3 important Knockout concepts:
* **View-model**: pure JS object that holds logic/data to represent stat of view
* **Models**: data from business domain
* **Views**: HTML/XML etc to display data
* KnockoutJS use observer pattern for synchronizing btw View-Model and View. (e.g. important methods used in View-Model js)
* `ko.observable` to manage variables
* `ko.observableArray`: to manage arrays
* `ko.computed`: respond to changes from observables
## A real-world application - koCart
User stories:
* User can view the invetory catalog
* User can search the catalog
* User can click a button to add items to catalog
* App allow add/update/delete from catalog
* User can add/update/delete items from cart
* Admin can update user's personal information
3 parts in app:
* Catlog: contains and manage products
* Cart: calculate price of purchase/order
* Order, user can update personal info
## The view-model
**view-model** = pure code representation of the data and operations on UI (i.e. Control). It

2
Home.md Normal file

@ -0,0 +1,2 @@
# Home

BIN
imgs/7074OS_01_01.jpg Normal file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

70
tut-chap01.md Normal file

@ -0,0 +1,70 @@
# Tutorial 01
This tutorial follows **Chapter 01. Refreshing the UI Automatically with KnockoutJS**
## A real-world application - koCart
We want to learn KnockoutJS through building a web app
Define user stories:
* The user should be able to view the catalog
* We should have the ability to search the catalog
* The user can click on a button to add items to the catalog
* The application will allow us to add, update, and delete items from the catalog
* The user should be able to add, update, and delete items from the cart
* We will allow the user to update his personal information
* The application should be able to calculate the total amount in the cart
* The user should be able to complete an order
Web app consists of 3 parts:
* **catalog**: contains and manages all the products we have in the shop.
* **cart**: responsible for calculating the price of each line and the total amount of the order.
* **order**: user can update his personal information and confirm the order.
## Installing components
Objective: Setup dev environment for ko-cart
Steps:
1. Download JS libraries:
1. [Bootstrap](https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip)
2. [jQuery](https://code.jquery.com/jquery-2.1.1.min.js)
3. [KnockoutJS](http://knockoutjs.com/downloads/knockout-3.2.0.js)
2. Create folder `ko-cart` in repo
3. Create 3 subfolders `css`, `js`, `fonts` in `ko-cart`
4. Create `index.html` within `ko-cart`
5. Put all JS libraries to corresponding subfolders according to file types
6. Modify content of following `index.html` to set file links correctly
```html
<!DOCTYPE html>
<html>
<head>
<title>KO Shopping Cart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<script type="text/javascript" src="js/vendors/jquery.min.js">
</script>
<script type="text/javascript" src="js/vendors/bootstrap.min.js">
</script>
<script type="text/javascript" src="js/vendors/knockout.debug.js">
</script>
</body>
</html>
```
## The view-model
Objective: Create a simple MVVP have multiple items in catalog
### The view
Objective: Create a simplist MVVP for start
Steps:
1. Add data bind into body of HTML
2. Create `js/viewmodel.js` to create simplest view-model
Outcome shown in 4e774c2