Knockoutjs.com - Hello World Example

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

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
    <div id="console"></div>
    <div data-bind="foreach: $root.sliders">
       <p data-bind="text: day"></p>
    </div>

JavaScript

//=================================================
// DATA
//=================================================
var schedule = {};

var defaultSegments = [{
    start: 0,
    end: 6,
    setpoint: 8
  },
  {
    start: 6,
    end: 9,
    setpoint: 18
  },
  {
    start: 9,
    end: 17,
    setpoint: 12
  },
  {
    start: 17,
    end: 22,
    setpoint: 18
  },
  {
    start: 22,
    end: 24,
    setpoint: 8
  }
];

schedule.mon = JSON.parse(JSON.stringify(defaultSegments));
schedule.tue = JSON.parse(JSON.stringify(defaultSegments));
schedule.wed = JSON.parse(JSON.stringify(defaultSegments));
schedule.thu = JSON.parse(JSON.stringify(defaultSegments));
schedule.fri = JSON.parse(JSON.stringify(defaultSegments));
schedule.sat = JSON.parse(JSON.stringify(defaultSegments));
schedule.sun = JSON.parse(JSON.stringify(defaultSegments));

function Slider(day,segments) {
  var self = this;
  self.day = ko.observable(day.toUpperCase());
  self.segments = ko.observableArray([segments]);
}

function MainViewModel() {
  var self = this;

  // -----------------------------------------------------------------------
  // Initialise the app
  // -----------------------------------------------------------------------
  self.start = function() {
    for (var dow in schedule) {
      self.draw_day_slider(dow);
    }
  };

  self.sliders = ko.observableArray([]);
  self.draw_day_slider = function(dow) {
    var segment_array = [];
    for (var segment in schedule[dow]) {
      var left = '50%';
      var width = '50%';
      var color = 'green';
      segment_array.push({
        segment_left: left,
        segment_width: width,
        segment_color: color
      });
    }
    self.sliders.push(new Slider(dow,segment_array));
    segment_array = [];
  };
}
var vm = new MainViewModel();
$(document).ready(function() {
ko.applyBindings(vm);
vm.start();
});