interview

home / developersection / interviews / setting up mvvm in knockout.js

Ask Question
ICSM Computer

IT-Hardware & Networking

Ravi Vishwakarma is a dedicated Software Developer with a passion for crafting efficient and innovative solutions. With a keen eye for detail and years of experience, he excels in developing robust software systems that meet client needs. His expertise spans across multiple programming languages and technologies, making him a valuable asset in any software development project.

Follow
Can you answer this question?
Answer

1 Answers

ICSM Computer

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

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

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy