KO Computed Observables

by tomas_eklund

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label>Dozen:</label><br>
<input type="number" data-bind="value: dozen"><br>
<label>Pieces:</label><br>
<input type="number" data-bind="value: pieces"><br>

CSS

body {
  background-color: #20262e;
  font-weight: bold;
  color: silver;
}

input {
  background-color: rgba(0, 0, 0, 0.15);
  border-style: none;
  padding: 10px;
  color: white;
}

JavaScript

function ViewModel() {
  var self = this;
  self.pieces = ko.observable('');
  self.dozen = ko.computed({
    read: function() {
      if (self.pieces() % 12 === 0) {
        return self.pieces() / 12;
      } else {
        return '';
      }
    },
    write: function(value) {
      if (value) self.pieces(value * 12);
    }
  });
}

ko.applyBindings(new ViewModel());