---
title: "Creating Single Page Applications (SPAs) with Knockout.js"
description: "Single Page Applications (SPAs) have transformed how we build web apps by providing a seamless user experience without full-page reloads."
author: "ICSM Computer"
published: 2025-04-23
updated: 2025-04-23
canonical: https://www.mindstick.com/articles/339118/creating-single-page-applications-spas-with-knockout-js
category: "knockcout js"
tags: ["knockout.js", "knockout observables", "knockout.js template", "knockout.js data-binding"]
reading_time: 3 minutes
---
# Creating Single Page Applications (SPAs) with Knockout.js
In this article, we’ll walk through the basics of building SPAs using Knockout.js, covering core concepts like **observables**, **bindings**, **routing**, [and best practices](https://www.mindstick.com/articles/341641/scaling-databases-concepts-strategies-and-best-practices).
**Single Page Application (SP)** has changed the way of creating an app by providing [user experience](https://yourviews.mindstick.com/view/87076/explore-your-career-in-user-experience-design) without reloading the entire page. One of the tools that facilitates SP development is Knockout.js, which is a JavaScript library that implements the MVVM (modal-view-view-modal) pattern. Today, while modern frames like `React`, `Angular` and `Vue` have [gained popularity](https://answers.mindstick.com/qa/51166/what-was-the-goal-of-the-americanization-movement-that-gained-popularity-between-1875-and-1910), Knochkout.js has become a somewhat alternative for simple **SPA** or heritage projects due to its lightweight nature and simplicity.
## Why Knockout.js for SPAs?
Knockout.js offers:
1. **Two-way [data binding](https://www.mindstick.com/forum/161355/how-does-data-binding-work-in-wpf)**: Syncs data between UI and JavaScript models.
2. **Declarative bindings**: [Makes your](https://www.mindstick.com/blog/11381/what-makes-your-business-better) HTML dynamic and clean.
3. **Observable arrays and computed properties**: Great for reactive interfaces.
4. **Extensibility**: Easy to extend or integrate with other libraries.
## Setting Up Knockout.js
You can include Knockout.js in [your project](https://answers.mindstick.com/qa/93843/is-it-necessary-to-add-bootstrap-js-and-bootstrap-css-both-in-your-project) via CDN:
```html
```
## Building Blocks of Knockout
### 1. Observables
Observables are the heart of Knockout’s reactivity.
```plaintext
var viewModel = {
firstName: ko.observable('John'),
lastName: ko.observable('Doe')
};
```
### 2. Bindings
Bind observables to your HTML:
```html
Hello, !
```
## Creating a Simple SPA Structure
Let’s build a simple SPA with two views: Home and About.
### 1. HTML Template
```html
```
### 2. JavaScript ViewModel with Routing
```plaintext
function AppViewModel() {
var self = this;
self.userName = ko.observable("Visitor");
self.currentView = ko.observable("home");
// Simple hash-based router
self.router = function () {
var hash = window.location.hash || "#home";
self.currentView(hash.replace('#', ''));
};
window.addEventListener("hashchange", self.router);
self.router(); // initial load
}
ko.applyBindings(new AppViewModel());
```
This approach uses a basic hash-based routing system to change views dynamically.
## Enhancing the SPA
### Computed Observables
```plaintext
self.fullName = ko.computed(function () {
return self.firstName() + " " + self.lastName();
});
```
### Observable Arrays
```plaintext
self.items = ko.observableArray(['Item 1', 'Item 2']);
```
### Looping in Templates
```html