Knockout Get observable fields

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<table>
  <thead>
    <tr data-bind='foreach: headers()'>
      <th data-bind='text: $data'></th>
    </tr>
  </thead>
  <tbody data-bind='foreach: shoppingCart'>
    <tr>
      <td data-bind='text: name'></td>
      <td data-bind='text: price'></td>
      <td>
        <!-- Add a list of tags. -->
        <ul data-bind='foreach: tags'>
          <li data-bind='text: $data'></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 100%;
  border: 1px solid black;
}

thead {
  text-align: left;
}

th,
td {
  border-bottom: 1px solid black;
}

JavaScript

function Product(name, price, tags) {
  this.name = ko.observable(name);
  this.price = ko.observable(price);
  tags = typeof(tags) !== 'undefined' ? tags : [];
  this.tags = ko.observableArray(tags);
}

function model() {
  var self = this;
  this.shoppingCart = ko.observableArray([]);
  this.headers = function () {
    if (self.shoppingCart().length) {
      return Object.keys(self.shoppingCart()[0]);
    }
  };
};

var myViewModel = new model();

$(document).ready(function() {
  ko.applyBindings(myViewModel);
  myViewModel.shoppingCart.push(
    new Product("Buns", 1.49, ['Baked goods', 'Hot dogs']),
    new Product("Cups", 2.00, ['Paper Products', 'Drinks']),
    new Product("Plates", 1.50, ['Paper Products'])
  );
});