Conditional constructs

Dynamic regions currently support two conditional constructs. The first is "spry:if". In the following example, the li tag is only written out if the value of {@path} begins with the letter s:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Region Example</title>
<script type="text/javascript" src="../../includes/xpath.js"></script>
<script type="text/javascript" src="../../includes/SpryData.js"></script>
<script type="text/javascript">
var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo");
</script>
</head>
<body>
	<div spry:region="dsPhotos">
		<ul class="spry:repeat">
			<li spry:if="'{@path}'.search(/^s/) != -1;">{@path}</li>
		</ul>
	</div>
</body>
</html>

To make an element conditional, add an spry:if attribute to the element with a value that is a JavaScript expression that returns zero or nonzero values. A nonzero value that the JavaScript expression returns results in the element being written to the final output.

If you need an if-else construct, use the "spry:choose" construct. The following example uses the spry:choose construct to color every other div:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Region Example</title>
<script type="text/javascript" src="../../includes/xpath.js"></script>
<script type="text/javascript" src="../../includes/SpryData.js"></script>
<script type="text/javascript">
var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo");
</script>
</head>
<body>
	<div spry:region="dsPhotos">
		<div spry:choose="spry:choose">
			<div spry:when="'{@path}' == 'surf.gif'">{@path}</div>
			<div spry:when="'{@path}' == 'undefined'">Path was not defined.</div>
			<div spry:default="spry:default">Unexpected value for path!</div>
		</div>
	</div>
</body>
</html>

The spry:choose construct provides functionality equivalent to a case statement, or an if-else if-else construct. To create a spry:choose structure add a spry:choose attribute to an element. Next, add one or more child elements with spry:when attributes on them. The value of a spry:when attribute should be a JavaScript expression that returns a zero or nonzero value. To have a default case, in case all of the JavaScript expressions for each spry:when attribute return zero or false, add an element with a spry:default attribute. The spry:default attribute doesn't require a value, but XHTML states that all attributes must have a value, therefore, set the value of the attribute equal to its name.

The region processing engine evaluates the spry:when attribute of each node in the order they are listed under their parent element. The spry:default element is always evaluated last, and only if no spry:when expression returns a nonzero value.