1 1_refreshing_the_ui_automatically_with_knockoutjs

Jason Zhu edited this page 2022-04-18 22:07:30 +10:00

Table of Contents

• Chapter 1. Refreshing the UI Automatically with KnockoutJS
• Summary
• A real-world application - koCart
• The view-model

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.

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