commit 8c8830e1c400654493c1c41e7fa223c45d010bce Author: Jason Zhu Date: Mon Apr 18 22:07:30 2022 +1000 Initial Commit diff --git a/1_refreshing_the_ui_automatically_with_knockoutjs.md b/1_refreshing_the_ui_automatically_with_knockoutjs.md new file mode 100644 index 0000000..e359724 --- /dev/null +++ b/1_refreshing_the_ui_automatically_with_knockoutjs.md @@ -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 \ No newline at end of file diff --git a/Home.md b/Home.md new file mode 100644 index 0000000..2bbca1d --- /dev/null +++ b/Home.md @@ -0,0 +1,2 @@ +# Home + diff --git a/imgs/7074OS_01_01.jpg b/imgs/7074OS_01_01.jpg new file mode 100644 index 0000000..be0911a Binary files /dev/null and b/imgs/7074OS_01_01.jpg differ diff --git a/tut-chap01.md b/tut-chap01.md new file mode 100644 index 0000000..e0f69e1 --- /dev/null +++ b/tut-chap01.md @@ -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 + + + + KO Shopping Cart + + + + + + + + + +``` + +## 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 \ No newline at end of file