hurricanepkt/KnockoutFriendOrders.html

## KnockoutFriendOrders.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <script src="/Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>

    <script src="/Scripts/knockout-1.2.0.js" type="text/javascript"></script>
</head>

<body>
    Hello Mark
<h3>
    Details</h3>
<p>
    First Name :
    <input data-bind="value: firstName" /></p>
<p>

    Last Name :
    <input data-bind="value: lastName" /></p>
<p>
    Full Name : <span data-bind="text: fullName"></span>
</p>
<h2>
    Friends (<span data-bind="text: friends().length"></span>)</h2>
<ul data-bind="template: { name:'friendsTemplate', foreach:friends}">
</ul>
<div id="loading">loading ....</div>

again...whats up?
<script id="friendsTemplate" type="text/x-jquery-tmpl">
        <li>
            <input data-bind="value: name" />
            <button data-bind="click: remove">Remove</button>

            <label><input type="checkbox" data-bind="checked: isOnTwitter" /> Is On Twitter</label>
            <input data-bind="value: twitterName, visible : isOnTwitter" />
            <input data-bind="value: order" />
        </li>
</script>
<button data-bind="click: addFriend, enable: friends().length < 5">
    Add friend</button>
<button data-bind="click: save">
    Save</button>
<div id="SaveResults">
</div>
<script type="text/javascript">


    var viewModel = {
        firstName: ko.observable("Bert"),
        lastName: ko.observable("Smith"),
        friends: ko.observableArray([new friend("Steve"), new friend("Annie")]),
        addFriend: function () {
            this.friends.push(new friend("Another"));
        },
        save: function () {
            for (var i = 0; i < this.friends().length; i ++) {
                this.friends()[i].order = i;
            }
            $.ajax({
                url : "/Home/Save",
                type: "post",
                data: ko.toJSON(this),
                contentType: "application/json",
                success: function (result) { $("#SaveResults").html(result.message); }
            });
        }
    };

    function friend(name) {
        return {
            name: ko.observable(name),
            isOnTwitter: ko.observable(false),
            twitterName: ko.observable(),
            order : ko.observable(-2),
            remove: function () {
                viewModel.friends.remove(this);
            }
        };
    }

    viewModel.fullName = ko.dependentObservable(function () {
        return this.firstName() + " " + this.lastName();
    }, viewModel);
    ko.applyBindings(viewModel);

    $(document).ready(function () {
        $('#loading').hide();
    });

    $('#loading').ajaxStart(function() {
        $(this).show();
    }).ajaxStop(function() {
        $(this).hide();
    });
</script>

</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Index</title>
	<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
	<script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
	<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
	<script src="/Scripts/jQuery.tmpl.min.js" type="text/javascript"></script>

	<script src="/Scripts/knockout-1.2.0.js" type="text/javascript"></script>
	</head>

	<body>
	Hello Mark
	<h3>
	Details</h3>
	<p>
	First Name :
	<input data-bind="value: firstName" /></p>
	<p>

	Last Name :
	<input data-bind="value: lastName" /></p>
	<p>
	Full Name : <span data-bind="text: fullName"></span>
	</p>
	<h2>
	Friends (<span data-bind="text: friends().length"></span>)</h2>
	<ul data-bind="template: { name:'friendsTemplate', foreach:friends}">
	</ul>
	<div id="loading">loading ....</div>

	again...whats up?
	<script id="friendsTemplate" type="text/x-jquery-tmpl">
	<li>
	<input data-bind="value: name" />
	<button data-bind="click: remove">Remove</button>

	<label><input type="checkbox" data-bind="checked: isOnTwitter" /> Is On Twitter</label>
	<input data-bind="value: twitterName, visible : isOnTwitter" />
	<input data-bind="value: order" />
	</li>
	</script>
	<button data-bind="click: addFriend, enable: friends().length < 5">
	Add friend</button>
	<button data-bind="click: save">
	Save</button>
	<div id="SaveResults">
	</div>
	<script type="text/javascript">


	var viewModel = {
	firstName: ko.observable("Bert"),
	lastName: ko.observable("Smith"),
	friends: ko.observableArray([new friend("Steve"), new friend("Annie")]),
	addFriend: function () {
	this.friends.push(new friend("Another"));
	},
	save: function () {
	for (var i = 0; i < this.friends().length; i ++) {
	this.friends()[i].order = i;
	}
	$.ajax({
	url : "/Home/Save",
	type: "post",
	data: ko.toJSON(this),
	contentType: "application/json",
	success: function (result) { $("#SaveResults").html(result.message); }
	});
	}
	};

	function friend(name) {
	return {
	name: ko.observable(name),
	isOnTwitter: ko.observable(false),
	twitterName: ko.observable(),
	order : ko.observable(-2),
	remove: function () {
	viewModel.friends.remove(this);
	}
	};
	}

	viewModel.fullName = ko.dependentObservable(function () {
	return this.firstName() + " " + this.lastName();
	}, viewModel);
	ko.applyBindings(viewModel);

	$(document).ready(function () {
	$('#loading').hide();
	});

	$('#loading').ajaxStart(function() {
	$(this).show();
	}).ajaxStop(function() {
	$(this).hide();
	});
	</script>

	</body>

	</html>