Setting Up MVVM in Knockout.js

ICSM Computer 456 23 Apr 2025

1 Answers

ICSM Computer 23 Apr 2025

Setting up MVVM (Model-View-ViewModel) in Knockout.js is one of its core strengths. Here's a step-by-step breakdown on how to structure and implement MVVM using Knockout:

Folder Structure (simple version)

my-knockout-app/
├── index.html          // View
├── viewModel.js        // ViewModel
├── model.js            // Model (optional/simple)
└── css/
    └── styles.css

Model (model.js)

This is your data structure or raw object. It can be a plain JS object or class.

function Person(data) {
  this.firstName = data.firstName;
  this.lastName = data.lastName;
}

ViewModel (viewModel.js)

This contains all observables, logic, and bindings.

function AppViewModel() {
  const self = this;

  // Observable properties
  self.firstName = ko.observable("John");
  self.lastName = ko.observable("Doe");

  // Computed observable
  self.fullName = ko.computed(() => {
    return self.firstName() + " " + self.lastName();
  });

  // Sample action
  self.capitalizeFirstName = function () {
    self.firstName(self.firstName().toUpperCase());
  };
}

ko.applyBindings(new AppViewModel());

View (index.html)

This is your HTML with Knockout bindings.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Knockout MVVM</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
  <script src="viewModel.js"></script>
</head>
<body>

  <h2>Knockout MVVM Example</h2>
  <p>First Name: <input data-bind="value: firstName" /></p>
  <p>Last Name: <input data-bind="value: lastName" /></p>
  <p>Full Name: <strong data-bind="text: fullName"></strong></p>

  <button data-bind="click: capitalizeFirstName">Capitalize First Name</button>

</body>
</html>

Bonus Tips

Use ko.observableArray([]) for list-type data.
Use ko.mapping plugin to map server JSON data into observables (optional).
Use ko.computed for live-updating dependent values.
Apply two-way binding with value, checked, visible, etc.

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

interview