kyleondata · April 10, 2012 04:09
diff --git a/blog.html b/blog.html
 <html>
 	<head>
 		<style>
 			.post {
 				 list-style-type: none;
 			}
 		</style>

 		<script src='jquery-1.7.2.min.js'></script>
                <script src='knockout-2.0.0.js'></script>
 		<script>
                // Store the model globally
                var model;

                // Handle the DOM Ready (Finished Rendering the DOM)
 		$(document).ready(function(){
                     // Bind a function to the keypress event for the post
                     // text box
 		     $('#post').bind('keypress', function(e) {
 		        if (e.which == 13){
                        // On key press = 'enter' key
                        // Send the request
 				send();
 			}
 		     });

                     // Get the post from the API
 		     getPosts();
                  });

 		function getPosts()
 		{
                    // Call the API and get the posts from MongoDB
 	            $.ajax({
 				url: "http://localhost:8080/blog",
 				dataType: 'json'
 		    }).done(function(data){
                         // Create an observable array.
                         // This means that knockout will automatically update
                         // UI elements that have items bound to it
                         model = ko.observableArray(data);
                         // Apply the Bindings that are set up by Knockout
                         ko.applyBindings(model);
 		     }).error(function(jqXHR, textStatus){
                         // Just show the error status
 				alert(jqXHR.status)
 		     });
 		}

 		function send()
 		{
                     // Get the value from the text box
 		     var post = $('#post').val();
 		     // Only commit if there is an actual value
 		     if (post != '')
 		     {
                         // stub out the message
 			 var json = {message : post};
                         // Commit the post via Ajax Call
 		         $.ajax({
 			     url: "http://localhost:8080/blog",
 			     type: "POST",
 			     data: JSON.stringify(json)
 			})
                        // Update the KO model which will automatically
                        // Update the list
                        model.push(json);
                        // Clear out the textbox
 			$('#post').val('')
 		      }
 		}
 		</script>
 	</head>
 	<body>
 		<input type='text' id='post'>
 		<input type='button' id='send' value='Send' onClick='send();'/>
 		<br><br>

 		<ul class='post' data-bind="foreach: $data">
            <li data-bind="text: $data.message"></li>
 		</ul>
 	</body>

 </html>
	<html>
	<head>
	<style>
	.post {
	list-style-type: none;
	}
	</style>

	<script src='jquery-1.7.2.min.js'></script>
	<script src='knockout-2.0.0.js'></script>
	<script>
	// Store the model globally
	var model;

	// Handle the DOM Ready (Finished Rendering the DOM)
	$(document).ready(function(){
	// Bind a function to the keypress event for the post
	// text box
	$('#post').bind('keypress', function(e) {
	if (e.which == 13){
	// On key press = 'enter' key
	// Send the request
	send();
	}
	});

	// Get the post from the API
	getPosts();
	});

	function getPosts()
	{
	// Call the API and get the posts from MongoDB
	$.ajax({
	url: "http://localhost:8080/blog",
	dataType: 'json'
	}).done(function(data){
	// Create an observable array.
	// This means that knockout will automatically update
	// UI elements that have items bound to it
	model = ko.observableArray(data);
	// Apply the Bindings that are set up by Knockout
	ko.applyBindings(model);
	}).error(function(jqXHR, textStatus){
	// Just show the error status
	alert(jqXHR.status)
	});
	}

	function send()
	{
	// Get the value from the text box
	var post = $('#post').val();
	// Only commit if there is an actual value
	if (post != '')
	{
	// stub out the message
	var json = {message : post};
	// Commit the post via Ajax Call
	$.ajax({
	url: "http://localhost:8080/blog",
	type: "POST",
	data: JSON.stringify(json)
	})
	// Update the KO model which will automatically
	// Update the list
	model.push(json);
	// Clear out the textbox
	$('#post').val('')
	}
	}
	</script>
	</head>
	<body>
	<input type='text' id='post'>
	<input type='button' id='send' value='Send' onClick='send();'/>
	<br><br>

	<ul class='post' data-bind="foreach: $data">
	<li data-bind="text: $data.message"></li>
	</ul>
	</body>

	</html>