Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Scott Goodwin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Total</th>
      <th>Cost</th>
      <th>Qty2</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: OrderLines">
    <tr>
      <td><span data-bind="text: ProductCode"></span></td>
      <td><span data-bind="text: ProductCode"></span></td>
      <td><span data-bind="text: Cost"></span></td>
      <td>
        <input type="text" data-bind="value: Qty" />
      </td>
    </tr>
  </tbody>
</table>

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

JavaScript

var order = {
  Id: 1,
  CustomerName: 'A Customer',
  OrderLines: [{
    ProductCode: 'Prod_1',
    Cost: 11.11,
    Qty: 1
  }, {
    ProductCode: 'Prod_2',
    Cost: 22.22,
    Qty: 2
  }, {
    ProductCode: 'Prod_3',
    Cost: 33.33,
    Qty: 3
  }, ]
};

var orderMapping = {
  'OrderLines': {
    create: function(options) {
      return new orderLineViewModel(options.data);
    }
  }
}
orderLineViewModel = function(data) {
  var self = this;
  ko.mapping.fromJS(data, {}, this);
  LineValue = ko.observable(3);
};

orderViewModel = function(data) {
  var self = this;
  ko.mapping.fromJS(data, orderMapping, this);
};

var viewModel = new orderViewModel(order);
ko.applyBindings(viewModel);