index.html.haml

---
title: Welcome to Middleman
---

%h1 Dashboard
%h2 Net Income
%table
  %caption Net Income Over Time
  %thead
    %th Month Ending
    %th Income
    %th Expenses
    %th Net Income
  %tfoot
    %tr
      %td Totals
  %tbody(data-bind="foreach: rows")
    %tr
      %td(data-bind="text: monthEnding")
      %td(data-bind="text: income")
      %td(data-bind="text: expenses")
      %td(data-bind="text: netIncome")

net_income.js

// Overall view model for screen
function NetIncomeViewModel() {
    var self = this;

    self.rows = ko.observableArray([]);

    $.getJSON('/api/net_income', function(data) {
        self.rows(data);
    });
}

ko.applyBindings(new NetIncomeViewModel());