# Knockout.js — Declarative MVVM Data Binding for JavaScript

> A lightweight JavaScript library that provides declarative two-way data binding, automatic UI updates, and dependency tracking without a build step.

## Install

Save as a script file and run:

# Knockout.js — Declarative MVVM Data Binding for JavaScript

## Quick Use
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<p>Name: <input data-bind="value: name" /></p>
<p>Hello, <span data-bind="text: name"></span></p>
<script>
  ko.applyBindings({ name: ko.observable("World") });
</script>
```

## Introduction
Knockout.js is a JavaScript library that implements the Model-View-ViewModel (MVVM) pattern with declarative data bindings. It automatically tracks dependencies between data properties and updates the DOM when values change. Knockout requires no build tools and works by adding `data-bind` attributes to existing HTML.

## What Knockout.js Does
- Provides two-way data binding between JavaScript objects and DOM elements
- Tracks dependencies automatically so the UI updates when underlying data changes
- Supports computed observables for derived values that stay in sync
- Offers declarative template binding for rendering lists and conditional content
- Works in any browser without a compilation or bundling step

## Architecture Overview
Knockout centers on observables: wrapper objects that notify subscribers when their value changes. Computed observables re-evaluate automatically when any dependency updates. The binding system reads `data-bind` attributes from the DOM, links them to view model properties, and sets up subscriptions so changes flow from model to view and back. Custom bindings extend the system for specialized UI behaviors.

## Self-Hosting & Configuration
- Include via CDN or install with npm: `npm install knockout`
- Add a single script tag to any HTML page to start using data bindings
- No build step, transpiler, or CLI tooling required
- Use `ko.applyBindings(viewModel)` to activate bindings on the page
- Integrate with any backend or server-rendered framework without conflicts

## Key Features
- Automatic dependency tracking that keeps the UI consistent with data
- Declarative bindings for text, value, visible, click, foreach, if, and more
- Custom binding handlers for encapsulating reusable UI behaviors
- Pure computed observables that only re-evaluate when read after a dependency change
- Small library size (around 25 KB minified) with zero external dependencies

## Comparison with Similar Tools
- **Vue.js** — modern reactive framework with component model and ecosystem; Knockout is lighter and requires no build tools
- **React** — virtual DOM with JSX; Knockout uses direct DOM binding with HTML attributes
- **Alpine.js** — similar declarative approach for modern browsers; Knockout has a longer track record and deeper MVVM features
- **MobX** — state management library with observable patterns; Knockout includes its own DOM binding layer

## FAQ
**Q: Is Knockout.js still maintained?**
A: Yes. Knockout continues to receive maintenance releases and has a stable, production-ready API.

**Q: Can I use Knockout with TypeScript?**
A: Yes. Type definitions are available via `@types/knockout` on npm.

**Q: Does Knockout require a build step?**
A: No. Include the script via a CDN or a local file and start using `data-bind` attributes immediately.

**Q: How does Knockout compare to modern frameworks for new projects?**
A: Knockout is a practical choice for enhancing server-rendered pages or legacy apps with reactive behavior. For large single-page applications, Vue or React may offer a broader ecosystem.

## Sources
- https://github.com/knockout/knockout
- https://knockoutjs.com/

---
Source: https://tokrepo.com/en/workflows/asset-178607e1
Author: Script Depot