Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://rawgithub.com/timrwood/moment/2.1.0/min/moment.min.js"></script>
<p>Choose Month Filter:
    <select data-bind="options: filterMonths, value: chosenFilter"></select>
</p>
<p data-bind="text: 'Filter Date: '+moment(filterDate()).format('YYYY-MM-DD h:mm:ss a')"></p>
<table>
    <thead>
        <tr>
            <td>ProductName</td>
            <td>AI</td>
            <td>Date</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: filteredItems">
        <tr>
            <td data-bind="text: productName"></td>
            <td data-bind="text: ai"></td>
            <td data-bind="text: moment(date).format('YYYY-MM-DD h:mm:ss a')"></td>
        </tr>
    </tbody>
</table>

CSS

p {
    margin: 0 0 5px 0;
}
table {
    border: 2px solid black;
    width: 100%
}
table td {
    border: 1px solid black;
    padding:2px;
}

JavaScript

var ViewModel = function () {
    var self = this;
    self.filterMonths = ko.observableArray([12, 18, 24]);
    self.chosenFilter = ko.observable(24);
    self.tankMixRows = ko.observableArray([]);

    self.filterDate = ko.computed(function () {
        var d = moment().subtract('months', self.chosenFilter());
        return d;
    });
    self.filteredItems = ko.computed(function () {
        return ko.utils.arrayFilter(self.tankMixRows(), function (row) {
            // Filter logic here;
            // Return true if you want to keep the record
            return row.date > self.filterDate();
        });
    });
    self.getTankMixRows = function () {
        // fake ajax
        self.tankMixRows(testData);
    };
    self.getTankMixRows();
};

var testData = [{
    productName: "Test1",
    ai: 50,
    date: moment().subtract('months', 0)
}, {
    productName: "Test2",
    ai: 250,
    date: moment().subtract('months', 1)
}, {
    productName: "Test3",
    ai: 530,
    date: moment().subtract('months', 13)
}, {
    productName: "Test4",
    ai: 150,
    date: moment().subtract('months', 16)
}, {
    productName: "Test5",
    ai: 30,
    date: moment().subtract('months', 48)
}];

ko.applyBindings(new ViewModel());