--- title: "Setting Up MVVM in Knockout.js" description: "Setting Up MVVM in Knockout.js" author: "ICSM Computer" published: 2025-04-23 updated: 2025-04-23 canonical: https://www.mindstick.com/interview/34044/setting-up-mvvm-in-knockout-js category: "knockcout js" tags: ["knockout.js", "knockout mvc", "knockout.js mvvm"] reading_time: 3 minutes --- # Setting Up MVVM in Knockout.js 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) ```plaintext 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. ```javascript function Person(data) { this.firstName = data.firstName; this.lastName = data.lastName; } ``` ### ViewModel (viewModel.js) This contains all observables, logic, and bindings. ```javascript 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. ```html Knockout MVVM

Knockout MVVM Example

First Name:

Last Name:

Full Name:

``` ### 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. ## Answers ### Answer by ICSM Computer 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) ```plaintext 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. ```javascript function Person(data) { this.firstName = data.firstName; this.lastName = data.lastName; } ``` ### ViewModel (viewModel.js) This contains all observables, logic, and bindings. ```javascript 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. ```html Knockout MVVM

Knockout MVVM Example

First Name:

Last Name:

Full Name:

``` ### 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. --- Original Source: https://www.mindstick.com/interview/34044/setting-up-mvvm-in-knockout-js Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.