title: Knockout select list value on change show/hide second select list
body: <p>I am using MVC 5 and Knockout to create a page where names will be listed and against each name there is a selection list (uniform data for all the rows). On 'applyBinding' visible-binding and css-binding works but on subsequent change of selection of list item the modified rows does not respect either binding.
  My script is...</p>
  
  <pre><code>function Names(data){
      var self = this;
      self.id = ko.observable(data.id);
      self.name = ko.observable(data.name);
      self.reqStatus = ko.observable(data.reqStatus);
      self.rejReason = ko.observable(data.rejReason);
      self.showReason = ko.observale(false);
  
      self.reqStatus.subscribe(function(newValue){
          if (newValue == 2){
              self.showReason = true;
          }
      });
  
      self.statusCss = ko.computed(function(){
          if (self.reqStatus() == 2) {
              return "rejected";
          }else if (self.showReason() == true){
              return "rejected";
          }else{
              return "accepted";
          }
      });
  }
  
  function Reason(data){
      var self = this;
      self.id = ko.observable(data.id);
      self.text = ko.observable(data.text);
  }
  
  var reasons = ko.observableArray([]);
  $.getJSON(....gets Reason JSON....) 
  
  function Status(data){
      var self = this;
      self.id = ko.observable(data.id);
      self.title = ko.observable(data.title);
  }
  
  var listItems = ko.observableArray([]);
  $.getJSON(....gets Status JSON....) 
  </code></pre>
  
  <p>is used to populate listItems array</p>
  
  <pre><code>function ViewModel(data){
      var self = this;
      self.names = ko.observableArray(data);
      $getJson(...gets Names JSON .....) - to fetch and map data
  
      self.Save = function(){
          // Code to save data.
          jsonArray = ko.toJSON(this.names);
          // Here I can see that the select list value change has been effected in observableArray of 'names'!
      }
  
      self.acceptCount = ko.computed(function(){
          var acc = 0;
          ko.utils.arrayForEach(.... to get the value);
      });
  };
  
  ko.applyBindings(new ViewModel());
  </code></pre>
  
  <p>My HTML...</p>
  
  <pre><code>&lt;div&gt;
     &lt;p&gt; Total Accepted :&lt;span data-bind="text: acceptCount"&gt;&lt;/span&gt;&lt;/p&gt;
     &lt;table&gt;
         &lt;tbody data-bind="foreach: names"&gt;
             &lt;tr data-bind="css: statusCss"&gt;
                 &lt;td&gt;&lt;span data-bind="text: name"&gt;&lt;/span&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;select data-bind="options: listItems, optionText: 'title', optionValue:'id', value: reqStatus"&gt;&lt;/select&gt; &lt;/td&gt;
                 &lt;td&gt;&lt;select data-bind="options: reasons, optionText: 'text', optionValue:'id', value: rejReason, visible: showReason" &gt;&lt;/select&gt;&lt;/td&gt;
             &lt;/tr&gt;
         &lt;/tbody&gt;
     &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I load page; visible-binding and CSS-binding works great. 
  1 - The problem is when selected list item is changed the required visible-binding and CSS-binding does not happen. However, when I click on Save button and convert array to JSON, I can see that the changes in selected list item are there so why not binding is happening?
  2 - When I change select list item (the first one); there is an error if select the value which will cause CSS change...</p>
  
  <blockquote>
    <p>JavaScript runtime error: Function expected</p>
  </blockquote>
  
  <p>This error is raised here</p>
  
  <pre><code>self.statusCss = ko.computed(function(){
          if (self.reqStatus() == 2) {
              return "rejected";
          }else if (self.showReason() == true){ // &lt;--- error here
              return "rejected";
          }else{
              return "accepted";
          }
      }
  </code></pre>