demos/step-by-step/03_top-level-linking.html

<!DOCTYPE html>
<html>
<head>
	<script src="//code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>Data-Linking to static content in the page</h3>

<div class="buttons">
	<button onclick="setNameAndCityAndColorAndCars()">Modify name, city, color and cars</button>
	<button onclick="setCity()">Modify city</button>
</div>

<hr />

<div id="myLinkedContent">

	<div class="subhead">Linking to data values and expressions</div>

	<p data-link="css-background-color{:roleColor}">
		Name: <span data-link="firstName"></span> <span data-link="lastName"></span>
	</p>

	<p>
		<input data-link="firstName trigger=true" />
		<input data-link="{:lastName trigger=true:} title{:~infoSummary(firstName, lastName, address.city, cars.quantity)}" />
		<input data-link="address.city trigger=true" />
		<input data-link="{upper:roleColor trigger=true:}" />
	</p>

	<p>Cars:
		<em>Quantity</em> <input data-link="cars.quantity trigger=true" />
		<em>Price</em> <input data-link="cars.price trigger=true" />
		<em>Total Value:</em> <span data-link="cars.quantity * cars.price"></span>
	</p>

	<p>
		<span data-link="html{:~infoSummary(firstName, lastName, address.city, cars.quantity, true)}"></span>
	</p>
</div>

<script type="text/javascript">
	var person = {
			firstName: "Jo",
			lastName: "Proctor",
			cars: {
				quantity: 13,
				price: 150
			},
			address: {
				city: "Redmond"
			},
			roleColor: "yellow"
		};

	function setNameAndCityAndColorAndCars() {
		$.observable( person )
			.setProperty({
				"cars.quantity": person.cars.quantity+1,
				"cars.price": person.cars.price-3,
				lastName: person.lastName + "Plus",
				"address.city": person.address.city + "More",
				roleColor: (person.roleColor === "yellow" ? "#8DD" : "yellow")
			});
	}

	function setCity() {
		$.observable( person ).setProperty( "address.city", person.address.city + "Add" );
// This will also work:
//		$.observable( person.address ).setProperty( "city", person.address.city + "Add" );
	}

	$.views.helpers({
		infoSummary: function( firstName, lastName, city, cars, html ) {
			return html
				? ("<b>" + firstName + " " + lastName + "</b> lives in <i>" + city +  "</i> and owns " + cars + " cars.")
				: (firstName + " " + lastName + " lives in " + city + " and owns " + cars + " cars.");
		}
	});

	$.views.converters({
		upper: function( val ) {
			return val.toUpperCase();
		}
	});

	// Calling link on an element, with first parameter 'true', to link the contents of the element.
	$("#myLinkedContent").link( true, person );
</script>
</body>
</html>