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:

Download JS libraries:
Create folder ko-cart in repo
Create 3 subfolders css, js, fonts in ko-cart
Create index.html within ko-cart
Put all JS libraries to corresponding subfolders according to file types
Modify content of following index.html to set file links correctly

<!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:

Add data bind into body of HTML
Create js/viewmodel.js to create simplest view-model

Outcome shown in 4e774c2