Looping constructs

Dynamic regions currently support two looping constructs. One allows you to repeat an element and all of its content for each row in a given data set (spry:repeat), and another allows you to repeat all of the children of a given element for each row in a given data set (spry:repeatchildren).

To designate an element as something that repeats, add a spry:repeat attribute to the element with a value that is the name of the data set to repeat. The following example shows an li block that repeats for every row in the dsPhotos data set

<!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>
			<li spry:repeat="dsPhotos">{@path}</li>
		</ul>
	</div>
</body>
</html>

To repeat just the children of an element, use the spry:repeatchildren attribute instead. In the following example, the children of the ul tag repeats for every row in the dsPhotos data set:

<!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 spry:repeatchildren="dsPhotos">
			<li>{@path}</li>
		</ul>
	</div>
</body>
</html>

The preceding "spry:repeat" and "spry:repeatchildren" examples are functionally equivalent, but "spry:repeatchildren" becomes more useful when used in conjunction with conditional constructs. Both examples result in the following output:

<!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>
		<ul>
			<li>sun.jpg</li>
			<li>tree.jpg</li>
			<li>surf.jpg</li>
		</ul>	
	</div>
</body>
</html>

If you do not want to output the content in a repeat region for every row in the data set, limit what gets written out during the loop processing by adding a spry:test attribute to the element that has the spry:repeat or spry:repeatchildren attribute on it.

The following example shows an li block that is only output if the first letter of the value of {@path} starts 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>
			<li spry:repeat="dsPhotos" spry:test="'{@path}'.search(/^s/)
!= -1;">{@path}</li>
		</ul>
	</div>
</body>
</html>

The value of this spry:test attribute can be any JavaScript expression that evaluates to zero or false or some nonzero value. If the expression returns a nonzero value, the content is output. Because you are using XHTML, any special characters like &, <, or > that might be used in a JavaScript expression need to be converted to HTML entities. You can also use data references inside this JavaScript expression and the dynamic region processing engine provides the actual values from a data set just before evaluating the spry:test expression.

The following code shows the final output of the preceding example:

<!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>
		<ul>
			<li>sun.jpg</li>
			<li>surf.jpg</li>
		</ul>
	</div>
</body>
</html>