Tutorial by Examples

The click binding can be used with any visible DOM element to add an event handler, that will invoke a JavaScript function, when element is clicked. <button data-bind="click: onClick">Click me</button> ko.applyBindings({ onClick: function(data, event) { // data: the...

Use this binding to build options for a select item <select data-bind="options: gasGiants"></select> <script type="text/javascript"> var viewModel = { gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus']) }; </scri...

The disabled binding adds a disabled attribute to a html element causing it to no longer be editable or clickable. This is useful mainly for <input>, <select>, <textarea>, <a> and <button> elements <input data-bind="disabled: disableInput"/> <sc...

Event handler to be invoked when a DOM element is submitted. <form data-bind="submit: doSomething"> <!-- form content here --> <button type="submit"></button> </form> <script type="text/javascript"> var vm = { ...

Use the value binding to obtain the value of an element. The value binding can be applied to any form control, however there are other bindings that may be better suited for checkboxes, radio buttons, and text inputs. The following example illustrates how to apply the binding element to several for...