Steven Sanderson SteveSanderson

##Making the data editable

You're not limited to displaying static data. Let's use the value binding, along with some regular HTML <input> controls, to make the data editable.

Add the following markup to the bottom of your view (leaving the existing markup in place above it):

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

Now run the application. What happens when you edit the text in one of the text boxes?

	<html><head>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"></script>

	<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
	<script src="http://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.js"></script>

	<style type="text/css">
	#sortable1, #sortable2 {
	list-style-type: none;

	gifts = [
	{
	image: "http://ecx.images-amazon.com/images/I/41MS0md3RJL._SL500_AA300_.jpg",
	asin: "-1",
	gifter_image: "/images/unknown_user.gif",
	gifter_id: -1
	}, {
	image: "http://ecx.images-amazon.com/images/I/41MS0md3RJL._SL500_AA300_.jpg",
	asin: "-1",
	gifter_image: "/images/unknown_user.gif",

	// Simple general-purpose "grid" binding
	// Note: this is just a spike

	ko.bindingHandlers.grid = {
	init: function(element, valueAccessor) {
	var value = valueAccessor();
	var grid = $(element).grid({
	columns: value.columns,
	source: ko.utils.unwrapObservable(value.data).slice(0),
	selectMode: value.selectMode,

	// Knockout JavaScript library v1.3.0ctp
	// (c) Steven Sanderson - http://knockoutjs.com/
	// License: MIT (http://www.opensource.org/licenses/mit-license.php)

	(function(window,undefined){
	function c(d){throw d;}var n=void 0,o=null,p=window.ko={};p.b=function(d,e){for(var b=d.split("."),a=window,f=0;f<b.length-1;f++)a=a[b[f]];a[b[b.length-1]]=e};p.h=function(d,e,b){d[e]=b};
	p.a=new function(){function d(a,f){if(a.tagName!="INPUT"\|\|!a.type)return!1;if(f.toLowerCase()!="click")return!1;var h=a.type.toLowerCase();return h=="checkbox"\|\|h=="radio"}var e=/^(\s\|\u00A0)+\|(\s\|\u00A0)+$/g,b={click:1,dblclick:1,mousedown:1,mouseup:1,mousemove:1,mouseover:1,mouseout:1,mouseenter:1,mouseleave:1};return{ha:["authenticity_token",/^__RequestVerificationToken(_.*)?$/],j:function(a,f){for(var h=0,b=a.length;h<b;h++)f(a[h])},g:function(a,f){if(typeof a.indexOf=="function")return a.indexOf(f);
	for(var h=0,b=a.length;h<b;h++)if(a[h]===f)return h;return-1},Ba:function(a,f,h){for(var b=0,d=a.length;b<d;b++)if(f.call(h,a[b]))return

	// Knockout JavaScript library v1.3.0ctp
	// (c) Steven Sanderson - http://knockoutjs.com/
	// License: MIT (http://www.opensource.org/licenses/mit-license.php)

	(function(window,undefined){
	var ko = window["ko"] = {};
	// Google Closure Compiler helpers (used only to make the minified file smaller)
	ko.exportSymbol = function(publicPath, object) {
	var tokens = publicPath.split(".");
	var target = window;

	public class VotingController : TaskAsyncController
	{
	static TaskCompletionSource<bool> hasNewVote = new TaskCompletionSource<bool>();

	// Could load this from a DB
	static Question question = new Question {
	QuestionText = "What's your favourite upcoming technology?",
	Answers = new List<Answer> {
	new Answer { AnswerId = 1, AnswerText = "C# 5" },
	new Answer { AnswerId = 2, AnswerText = "WebSockets" },

	ko.bindingHandlers.hasFocus = {
	init: function(element, valueAccessor) {
	$(element).focus(function() {
	var value = valueAccessor();
	value(true);
	});
	$(element).blur(function() {
	var value = valueAccessor();
	value(false);
	});

	// Knockout JavaScript library v2.2.0
	// (c) Steven Sanderson - http://knockoutjs.com/
	// License: MIT (http://www.opensource.org/licenses/mit-license.php)

	(function(){
	var DEBUG=true;
	(function(window,document,navigator,jQuery,undefined){
	!function(factory) {
	// Support three module loading scenarios
	if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {