sarpay
4/11/2013 - 5:12 PM

[mobile] [kendo] MVVM sample app - contacts manager

[mobile] [kendo] MVVM sample app - contacts manager

contactManager.js
content_copyfile_download
var kendoApp = new kendo.mobile.Application(document.body, {
	loading: "Loading..."
});


var newViewModel = kendo.observable({
	newName: "ABC",
	
	newSuffix: "",
	
	newPhone: "",
	
	newEmail: ""
});

var existingViewModel = kendo.observable({
	contactsLoaded: false,
	
	contacts: [
		{ Name: "Ted Person", Suffix: "", Email: "ted.person@fake.com", Phone: "555-555-5555" },
		{ Name: "Amu Person", Suffix: null, Email: "amy.person@fake.com", Phone: "555-555-5555" },
		{ Name: "Bob Person", Suffix: "Jr", Email: "bob.person@fake.com", Phone: "555-555-5555" }
	]
});
Contact Manager - Sample App.html
content_copyfile_download
<body>

	<div id="newview" data-role="view" data-title="New Contact" data-layout="viewlayout" data-model="newViewModel">
		<form action="" method="post">
			<ul id="newformlist" data-role="listview">
				<li>
					<label>Name:</label>
					<input type="text" id="Name" data-bind="value:newName" />
				</li>
				<li>
					<label>Suffix:</label>
					<input type="text" id="Suffix" name="Suffix" data-bind="value:newSuffix" />
				</li>
				<li>
					<label>Email:</label>
					<input type="email" id="Email" name="Email" data-bind="value:newEmail" />
				</li>
				<li>
					<label>Phone:</label>
					<input type="tel" id="Phone" name="Phone" data-bind="value:newPhone" />
				</li>
			</ul>
		</form>
	</div>

	<div id="existingview" data-role="view" data-title="Existing Contacts" data-layout="viewlayout" data-model="existingViewModel">
		<ul id="existinglist" data-role="listview" data-bind="source:contacts" data-template="contacttemplate">
		</ul>
	</div>

	<script type="text/x-kendo-template" id="contacttemplate">
		<h3>
			#= Name#
			# if (Suffix != null && Suffix.length > 0) { #
				#= Suffix #
			# } #
		</h3>
		<div>
			#= Phone #
		</div>
		<div>
			#= Email #
		</div>
	</script>
	
	<div data-role="layout" data-id="viewlayout">
		<header data-role="header">
			<div data-role="navbar">
				<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
				<span data-role="view-title"></span>
			</div>
		</header>

		<footer data-role="footer">

			<div id="footertabs" data-role="tabstrip">
				<a href="#newview" data-icon="add">New</a>
				<a href="#existingview" data-icon="contacts">Contacts</a>
			</div>

		</footer>
	</div>

</body>