Question

I am trying to achieve the following with knockout with some difficulty:

1. Bind a select form element … this works
2. Display the selected option via a ko.observable … this works
3. Use the ko.observable from #2 inside a ko.computed variable… I cant figure this out.

Here is a Fiddle of my attempt so far. any ideas?

Answer 1

Computed observables are evaluated immediately. When you create your viewModel variable in an object literal like in your example, it can’t be used yet in your computed observable.

A couple choices. Write it like:

var viewModel = {
    optionValues: [10, 20, 30],
    selectedOptionValue: ko.observable()
};

viewModel.multipledValue = ko.computed(function(){
    return this.selectedOptionValue() * 3;
}, viewModel);

ko.applyBindings(viewModel);​

or

var ViewModel = function() {
   this.optionValues = [10, 20, 30];
   this.selectedOptionValue = ko.observable();
   this.multipledValue = ko.computed(function(){
        return this.selectedOptionValue() * 3;
   }, this);

};

ko.applyBindings(new ViewModel());

Also, selectedOptionValue is an observable, so you would read its value by calling it as a function with no arguments like: this.selectedOptionValue()