Knockoutjs.com - Better list example

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

by navinleon

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<html>
<head>
	<title>iOS9 Day by Day - CloudKit Web Services Example</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
	<script type="text/javascript" src="cloudNotes.js"></script>
	<script src="https://cdn.apple-cloudkit.com/ck/1/cloudkit.js" async></script>
</head>
<body>

	<div class="container">

		<div class="page-header">
			<h1>CloudNotes <small>Example CloudKit JS Application</small></h1>
			<span data-bind="text: displayUserName"></span>
			<div id="apple-sign-in-button"></div>
		</div>

		<div data-bind="visible: newNoteVisible">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Add New Note</h3>
				</div>
				<div class="panel-body">
					<form data-bind="submit: saveNewNote">
						<div class="form-group">
							<label>Content</label>
							<input class="form-control" placeholder="Content" data-bind="value: newNoteContent" />
						</div>
						<button type="submit" data-bind="enable: saveButtonEnabled" class="btn btn-primary pull-right">Save Note</button>
					</form>
				</div>
			</div>
			<hr>
		</div>

		<div data-bind="foreach: notes">
			<div class="panel panel-default">
				<div class="panel-body">
					<p><span data-bind="text: fields.content.value"></span></p>                  				</div>
                <div>
                    <p><button>Delete Note</button></p>
                    </div>
			</div>
		</div>
           

	</div>

</body>
</html>

JavaScript

window.addEventListener('cloudkitloaded', function() {
	CloudKit.configure({
		containers: [{
			containerIdentifier: 'iCloud.com.kahlout.ClipCloud',
			apiToken: '65aa63aa048a3f25eaa008d8a5ddb1709d1b40aa44ae014f491855bf1a44d45c',
			environment: 'development'
		}]
	});

	function CloudNotesViewModel() {
		var self = this;
		var container = CloudKit.getDefaultContainer();
		var publicDB = container.privateCloudDatabase;

		self.notes = ko.observableArray();
		self.displayUserName = ko.observable('Unauthenticated User');

		self.newNoteVisible = ko.observable(false);
		self.newNoteContent = ko.observable('');

		self.saveButtonEnabled = ko.observable(true);

		self.saveNewNote = function() {

			if (self.newNoteContent().length > 0) {
				self.saveButtonEnabled(false);

				var record = {
					recordType: "CloudNote",
					fields: {

						content: {
							value: self.newNoteContent()
						}
					}
				};

				publicDB.saveRecord(record).then(
					function(response) {
						if (response.hasErrors) {
							console.error(response.errors[0]);
							self.saveButtonEnabled(true);
							return;
						}
						var createdRecord = response.records[0];
						self.notes.push(createdRecord);

						self.newNoteContent("");
						self.saveButtonEnabled(true);
					}
				);

			}
			else {
				alert('Note must have a title and some content');
			}
		};

		self.fetchRecords = function() {
			var query = { recordType: 'CloudNote' };

			// Execute the query.
			return publicDB.performQuery(query).then(function (response) {
				if(response.hasErrors) {
					console.error(response.errors[0]);
					return;
				}
				var records = response.records;
				var numberOfRecords = records.length;
				if (numberOfRecords === 0) {
					console.error('No matching items');
					return;
				}

				self.notes(records);
			});
		};

		self.gotoAuthenticatedState = function(userInfo) {
			if(userInfo.isDiscoverable) {
				self.displayUserName(userInfo.firstName + ' ' +...