Questions tagged [knockout.js]

Knockout.js is an open source JavaScript library implementation of the Model-View-View Model (MVVM) UI pattern in JavaScript and HTML.

Knockout.js is a pure JavaScript library with no external dependencies. It is supported in all major browsers, IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile).

Knockout.js works with any web framework.

The key features of Knockout.js include:

• Free, open source (MIT license)
• Small & lightweight — 55kb minified
• Declarative Bindings: Easily associate DOM elements with model data using a concise, readable syntax.
• Two-way binding: When your view model's state changes, your UI updates automatically. When you change form element values, the view model's state updates automatically.
• Dependency Tracking: Implicitly set up chains of relationships between model data, to transform and combine it.
• Templating: Quickly generate sophisticated, nested UIs as a function of your model data.
• Components - 3.2.0+: Controls or Widgets made up of self-contained reusable chunks of code.

Helpful links

• Home page
• Tutorial
• Documentation
• Forum
• Source Code
• "Knock Me Out", a blog by one of Knockout's contributors
• Wiki - Plugins, Sample Bindings, and Best Practices
• Latest Stable Release - knockout-3.5.1.js
• Download & Installation Guide
• External links

Stack Snippet Starter Pack

HTML:

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

JavaScript:

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
 
    this.fullName = ko.pureComputed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};
 
ko.applyBindings(new ViewModel("Planet", "Earth"));