KnockoutBase

by jhoguet

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://stevenlevithan.com/assets/misc/date.format.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div>
    <div data-bind="template: 'measurement.table'"></div>
    <div data-bind="template: 'observation.table'" ></div>
<div>
    <div id="chart" style="width:600px;height:300px;"></div>
    
<script id="observation.table" type="text/html">
    <table> 
        <thead>
            <th>Start</th>
            <th>End</th>
            <th>Hours Elapsed</th>
            <th>Change In Measurement</th>
            <th>Change / Hour</th>
            <th>% changed</th>
        </thead>
        <tbody data-bind="template: {name: 'observation.table.row', foreach: Observations}"></tbody>
    </table>


</script>
    
    
<script id="observation.table.row" type="text/html">
    <tr>
        <td data-bind="text: FormattedStartTimeStamp"></td>
        <td data-bind="text: FormattedEndTimeStamp"></td>
        <td data-bind="text: HoursElapsed"></td>
        <td data-bind="text: MeasurementChange"></td>
        <td data-bind="text: FormattedChangePerHour"></td>
        <td data-bind="text: FormattedChangePerHour"></td>
    </tr>
</script>
    
    <script id="measurement.table" type="text/html">
        <table> 
    <thead>
        <th>Date</th>
        <th>Measurement</th>
        <th></th>
    </thead>
    <tbody data-bind="template: {name: 'measurement.table.row', foreach: Measurements()}">
        
    </tbody>
</table>
<input type="button" value="add" data-bind="click: addMeasurment" />


    </script>



<script id="measurement.table.row" type="text/html">
    <tr data-bind="{click: edit, template:{name: IsEditing() ? 'measurement.table.row.edit' : 'measurement.table.row.show'}}"></tr>
</script>
<script...

CSS

table{
 width: 100%;   
}

JavaScript

var dateFromJSON = function(jsonDate) {
    return new Date(parseInt(jsonDate.replace('/Date(', '').replace(')/', '')));
};


var model = eval({
    "Id": "b0c878d8-e433-40b0-b291-01d07d577623",
    "Description": "Measurable 1",
    "Measurements": [{
        "TimeStamp": "\/Date(1328974559276)\/",
        "Measurement": 1200},
    {
        "TimeStamp": "\/Date(1328888159276)\/",
        "Measurement": 1210},
    {
        "TimeStamp": "\/Date(1328801759276)\/",
        "Measurement": 1220},
    {
        "TimeStamp": "\/Date(1328715359276)\/",
        "Measurement": 1230},
    {
        "TimeStamp": "\/Date(1328628959276)\/",
        "Measurement": 1200},
    {
        "TimeStamp": "\/Date(1328542559276)\/",
        "Measurement": 1250},
    {
        "TimeStamp": "\/Date(1328456159276)\/",
        "Measurement": 1260},
    {
        "TimeStamp": "\/Date(1328369759276)\/",
        "Measurement": 1270},
    {
        "TimeStamp": "\/Date(1328283359276)\/",
        "Measurement": 1280},
    {
        "TimeStamp": "\/Date(1328196959276)\/",
        "Measurement": 1290}]
});

function Observation(start, end) {
    this.StartTimeStamp = ko.observable(start.TimeStamp());
    this.EndTimeStamp = ko.observable(end.TimeStamp());

     this.FormattedStartTimeStamp  = ko.computed(function() {
        return this.StartTimeStamp ().format('m/d/yy');
    }.bind(this));
    
     this.FormattedEndTimeStamp   = ko.computed(function() {
        return this.EndTimeStamp ().format('m/d/yy');
    }.bind(this));
    
    
    this.HoursElapsed = ko.computed(function() {
        return (end.TimeStamp() - start.TimeStamp())
            / 1000 // to seconds
            / 60   // to minutes
            / 60   // to hours;
    }.bind(this));

    this.MeasurementChange = ko.computed(function() {
        return end.Measurement() - start.Measurement();
    }.bind(this));

    this.ChangePerHour = ko.computed(function() {
        return this.MeasurementChange() / this.HoursElapsed();
   ...