Questions tagged [knockout.js]

Knockout.js is an open source JavaScript library for dynamic HTML UIs using the Model-View-View Model (MVVM) pattern.

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

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")); 
20270 questions
259
votes
4 answers

Can you call ko.applyBindings to bind a partial view?

I'm using KnockoutJS and have a main view and view model. I want a dialog (the jQuery UI one) to popup with another view which a separate child view model to be bound to. The HTML for the dialog content is retrieved using AJAX so I want to be able…
Charlie
  • 10,227
  • 10
  • 51
  • 92
248
votes
1 answer

What are the key differences between Meteor, Ember.js and Backbone.js?

Learning Ember.js / Backbone.js has been on my to-do list for a while. Now that Meteor is out, I am just wondering if anyone with experience of Meteor, Ember.js and Backbone.js can summarize the key differences and pros and cons of these three…
K Z
  • 29,661
  • 8
  • 73
  • 78
228
votes
3 answers

Getting "The JSON request was too large to be deserialized"

I'm getting this Error: The JSON request was too large to be deserialized. Here's a scenario where this occurs. I have a class of country which hold a list of shipping ports of that country public class Country { public int Id { get; set; } …
Kayvan Karim
  • 2,986
  • 2
  • 18
  • 18
204
votes
13 answers

How to debug template binding errors for KnockoutJS?

I keep having trouble with debugging problems in KnockoutJS templates. Say I want to bind to a property called "items" but in the template I make a typo and bind to the (non existing) property "item". Using the Chrome debugger only tells me: "item"…
RogierBessem
  • 2,623
  • 3
  • 17
  • 15
202
votes
5 answers

KnockOutJS - Multiple ViewModels in a single View

I'm thinking that my application is getting quite large now, too large to handle each View with a single ViewModel. So I'm wondering how difficult it would be to create multiple ViewModels and load them all into a single View. With a note that I…
CLiown
  • 13,665
  • 48
  • 124
  • 205
198
votes
2 answers

Difference between knockout View Models declared as object literals vs functions

In knockout js I see View Models declared as either: var viewModel = { firstname: ko.observable("Bob") }; ko.applyBindings(viewModel ); or: var viewModel = function() { this.firstname= ko.observable("Bob"); }; ko.applyBindings(new…
Kev
  • 118,037
  • 53
  • 300
  • 385
192
votes
4 answers

How can I get Knockout JS to data-bind on keypress instead of lost-focus?

This example of knockout js works so when you edit a field and press TAB, the viewmodel data and hence the text below the fields is updated. How can I change this code so that the viewmodel data is updated every keypress? …
Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047
181
votes
8 answers

Javascript Equivalent to C# LINQ Select

Following this question here : Using the checked binding in knockout with a list of checkboxes checks all the checkboxes I've created some checkboxes using knockout that allow selection from an array. working fiddle taken from above…
Chris Nevill
  • 5,922
  • 11
  • 44
  • 79
167
votes
8 answers

Is it possible to data-bind visible to the negation ("!") of a boolean ViewModel property?

I'd like to use a property on my ViewModel to toggle which icon to display without creating a separate computed property of the inverse. Is this possible?
agradl
  • 3,536
  • 2
  • 18
  • 16
156
votes
4 answers

How to force a view refresh without having it trigger automatically from an observable?

Note: this is mostly for debugging and understanding KnockoutJS. Is there a way to explicitly request Knockout to refresh the view from (already bound) view model? I am looking for something like: ko.refreshView(); I understand that this is not an…
THX-1138
  • 21,316
  • 26
  • 96
  • 160
140
votes
6 answers

TypeScript with KnockoutJS

Is there any sample of using TypeScript with KnockoutJS? I'm just curious as to how they would work together? Edit Here is what I have, seems to work declare var ko: any; declare var $: any; class ViewModel { x = ko.observable(10); y =…
CallumVass
  • 11,288
  • 26
  • 84
  • 154
135
votes
13 answers

jQuery UI datepicker change event not caught by KnockoutJS

I'm trying to use KnockoutJS with jQuery UI. I have an input element with a datepicker attached. I'm currently running knockout.debug.1.2.1.js and it seems that the change event is never being caught by Knockout. The element looks like this:
Jose
  • 10,891
  • 19
  • 67
  • 89
130
votes
3 answers

How to use knockout.js with ASP.NET MVC ViewModels?

Bounty It's been awhile and I still have a couple outstanding questions. I hope by adding a bounty maybe these questions will get answered. How do you use html helpers with knockout.js Why was document ready needed to make it work(see first edit…
chobo2
  • 83,322
  • 195
  • 530
  • 832
116
votes
2 answers

When to use ko.utils.unwrapObservable?

I've written a few custom bindings using KnockoutJS. I'm still unsure when to use ko.utils.unwrapObservable(item) Looking at the code, that call basically checks to see if item is an observable. If it is, return the value(), if it's not, just return…
arb
  • 7,753
  • 7
  • 31
  • 66
116
votes
10 answers

How to clear/remove observable bindings in Knockout.js?

I'm building functionality onto a webpage which the user can perform multiple times. Through the user's action, an object/model is created and applied to HTML using ko.applyBindings(). The data-bound HTML is created through jQuery templates. So far…
awj
  • 7,482
  • 10
  • 66
  • 120
1
2 3
99 100