Question

I am fairly new to Knockout JS. I am trying to do a simple task, if the drop down menu changes show a helper text depending on the value selected in the drop down list.

My example is located on jsFiddle: http://jsfiddle.net/dnfCb/10/

Note: I am not sure if linking to jsFiddle is allowed, if not I will paste the code here. It seems the ko.computed event only fires on load. Can’t seem to get it to fire when the criteria changes.

Thank you for your time.

Answer 1

You need to bind your <select> value to an actual observable property to see changes.

<-- ------------------------ here....................... -->
<select name="search_option" data-bind="value: criteria">
    <option value="O">Order Search</option>
    <option value="P">PO Number Search</option>
</select>

and

var orderSearchViewModel = {
   criteria: ko.observable("O")   // give a default value
};

orderSearchViewModel.helperText = ko.computed(function() {
    if (this.criteria() == "P") {
        return "Searching by PO Number";
    }else {
        return "Searching by Order Number";
    }
}, orderSearchViewModel);

ko.applyBindings(orderSearchViewModel);​

Note that criteria is a function that needs to executed in order to get the underlying value, so

if (this.criteria == "P")

would not work.

http://jsfiddle.net/dnfCb/11/

---

BTW, I think the the self-contained view model set-up is a little nicer:

function OrderSearchViewModel() {
  var self = this;

  this.criteria = ko.observable("O");
  this.helperText = ko.computed(function() {
    if ( self.criteria() == "P" ) {
      return "Searching by PO Number";
    } else {
      return "Searching by Order Number";
    }
  });
}

ko.applyBindings( new OrderSearchViewModel() );​