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="patient">
	<p>
		<label class="control-label" for="inputIcon">Name :</label>
		<input class="span8" type="text" data-bind="value: name"
		 data-required="true" data-trigger="change" name="name">
	</p>
	<p>
		<label class="control-label" for="inputIcon">Address :</label>
		<input class="span8" name="address" type="text"
		 data-bind="value: address" data-required="true" data-trigger="change">
	</p>
	<p>
		<label class="control-label" for="inputIcon">Gender :</label>
				<select class="span8" name="gender" 
					data-bind="options: genderOptions,value: gender,optionsCaption: 'Select Gender'"
					data-required="true" data-trigger="change">
				</select>
	</p>
	<p>
		<label class="control-label" for="inputIcon">Consultant :</label>
		<select class="span8" name="consultant" 
		  data-bind="options: doctors,optionsText: function(item){return item.name},optionsValue:function(item){return item.username},selectedOptions: consultant,value:consultant"
		  data-required="true" data-trigger="change">
		</select>
	</p>
	<p>
		<label class="control-label" for="inputIcon">Username :</label>
		<input class="span8" type="text" 
			data-bind="value: username"
			name="username" data-required="true"
			data-trigger="change" 
			data-remote="${pageContext.request.contextPath}/isUserNameExists" 
			data-remote-method="GET">
	</p>
	<p>
		<label class="control-label" for="inputIcon">Password :</label>					
			<input class="span8" type="password"
			 data-bind="value: password"
			 name="password"
			 data-required="true"
			 data-trigger="change">
	</p>
	<p>
		<label class="control-label" for="inputIcon">Mobile :</label>
		<input class="span8"  type="text" data-bind="value: mobile"
			 data-type="number"
			 data-minlength="10"
			 data-required="true" 
			 data-trigger="change" data-type="phone" name="mobile">
	</p>
	<p>
		<label class="control-label" for="inputIcon">Email address :</label>
		<input...

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

var jsonStr = {
  "doctors": [
    {
      "id": 8,
      "schedules": [
        {
          "id": 8,
          "totime": "11:17",
          "dayId": 2,
          "location": "Somajiguda",
          "fromtime": "10:17",
          "hospitalId": 5,
          "day": "Tuesday",
          "hospital": "Yashoda"
        }
      ],
      "username": "d1",
      "degree": "DA(Anaesthesia)",
      "email": "[email protected]",
      "imagePath": "",
      "department": "Bio-Chemistry",
      "name": "d1",
      "userid": 51,
      "gender": "Male",
      "mobile": "1234567900"
    },
    {
      "id": 10,
      "schedules": [
        {
          "id": 10,
          "totime": "12:35",
          "dayId": 2,
          "location": "Somajiguda",
          "fromtime": "11:35",
          "hospitalId": 5,
          "day": "Tuesday",
          "hospital": "Yashoda"
        }
      ],
      "username": "d3",
      "degree": "BDS",
      "email": "[email protected]",
      "imagePath": "",
      "department": "Bio-Chemistry",
      "name": "d3",
      "userid": 56,
      "gender": "Male",
      "mobile": "1234567890"
    },
    {
      "id": 1,
      "schedules": [
        {
          "id": 1,
          "totime": "12:55",
          "dayId": 1,
          "location": "Somajiguda",
          "fromtime": "11:55",
          "hospitalId": 5,
          "day": "Monday",
          "hospital": "Yashoda"
        }
      ],
      "username": "doctor",
      "degree": "BDS",
      "email": "",
      "imagePath": null,
      "department": "Critical Care",
      "name": "doctor",
      "userid": 4,
      "gender": "Male",
      "mobile": "1234567890"
    },
    {
      "id": 7,
      "schedules": [
        {
          "id": 7,
          "totime": "11:17",
          "dayId": 2,
          "location": "Somajiguda",
          "fromtime": "11:17",
          "hospitalId": 5,
          "day": "Tuesday",
          "hospital": "Yashoda"
        }
      ],
      "username": "donald",
      "degree": "DA(Anaesthesia)",
     ...