http://stackoverflow.com/questions/42700711/knockout-js-conditional-observable-that-depends-on-observable

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div>
  <table style="border: 1px solid grey">
    <tbody data-bind="foreach: Items">
      <tr>
        <td>
          <input type="text" data-bind="value: isText" style="width: 40px;" />
        </td>
        <td>
          <span data-bind="text: $index"></span>
        </td>
        <td>
          <span data-bind="text: isText.formatted(), visible: !status().edit()"></span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

var testItemData1 = {
  isText: "0"
};
var testItemData2 = {
  isText: "1"
};

var viewModel = function() {
  var self = this;

  self.Items = ko.observableArray([
    new ListItem(testItemData1),
    new ListItem(testItemData2)
  ]);
};

function ListItem(data) {
  var self = this;
  this.isText = ko.observable(data.isText);
  this.isText.formatted = ko.computed(function() {
    var it = self.isText();
    if (it == '0') {
      return 'No';
    } else if (it == '1') {
      return 'Yes'
    } else {
      return 'Not Specified'
    }
  });

  this.status = ko.observable({
    edit: ko.observable(false)
  });
}

var model = new viewModel();

ko.applyBindings(model);