Which Knockout.js Bindings Are "two-way"?

Knockout.js boasts two-way bindings, and the live examples show how the value binding (when applied to a text input) updates the viewmodel. However, I've tried to update other bind

Solution 1:

Short answer

Two-way bindings: in general all the bindings related to something that the user can change directly, without the help of special scripts, like form control values or states: value, hasFocus, textInput, checked, selectedOptions. Or any custom binding related to something that the user can change (the typical example of 5 clickable stars implemented as a ko custom binding).

One-way bindings: all the states which cannot be directly changed by the user, for example visible. The user cannot change directly the visibility: it must be done via an script. In this case the script should not change the visibility of the DOM element itself, but should change the bound observable. The first wouldn't update the observable, but the latter would update the visibility of the bound element.

Long answer

If you look how to implement custom bindings you'll understand how they work: Creating custom bindings:

ko.bindingHandlers.yourBindingName = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element// Set up any initial state, event handlers, etc. here
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,// and again whenever any observables/computeds that are accessed change// Update the DOM element based on the supplied values here.
  }
};

If you look further you'll see what init callback can be used for:

Knockout will call your init function once for each DOM element that you use the binding on. There are two main uses for init:

1.To set any initial state for the DOM element

2. To register any event handlers so that, for example, when the user clicks on or modifies the DOM element, you can change the state of the associated observable

The key is in the second point: if the binding handles some kind of event, it will modify the observable value, which is what you consider the "way back" of the "two-way binding".

So, any binding that handles events to update the observable work as "two-way" binding.

Solution 2:

Your problem is that you're not updating the observable value, you're directly modifying the element's text. The same thing happens if you directly update the input element's value - you're not modifying the observable value at all. If you want to update the observable value, you can instead use:

this.changeName = function() {
    this.name('Bob');
};

JSFiddle demo.