Attribute Combinations and Region Debugging Sample

This page demonstrates the effect of combining certain processing instruction attributes.

Here is the current set of processing instruction attributes, listed in the order they are evaluated:

This page also demonstrates the use of Spry.Data.Region.debug which allows users to see what the final template being used to generate a region looks like, as well as seeing what the markup beeing generated looks like. All the user needs to do, is set Spry.Data.Region.debug equal to true, and all of this info will be output to the Spry trace/debug window in the lower right hand corner of the page.

In this example we are combining spry:if, spry:repeat with a spry:test, and spry:choose attributes on the region container to extract out the names of states that begin with the letter 'a', 'm', or 'n', and then color them based on the letter they start with.

The attributes are processed in the order mentioned in the list above, but because they are on the region container, they only act on the children *inside* the container, *not* on the container itself. It's important to note that the processing order of the attributes is built-into Spry, so the order of the attributes on the element does not matter.

Here's what the code for the list below looks like:

<ul spry:region="dsStates" spry:if="{ds_RowCount} != 0" spry:repeat="dsStates" spry:test="'{name}'.match(/^[amn]/i);" spry:choose="choose">
	<li spry:when="'{name}'.match(/^n/i);" style="color: red;">{name}</li>
	<li spry:when="'{name}'.match(/^m/i);" style="color: blue;">{name}</li>
	<li spry:when="'{name}'.match(/^a/i);" style="color: green;">{name}</li>
</ul>

And here is the actual list:

Here's a similar example, except the attributes are combined on table content *inside* a region container.

<div spry:region="dsStates" spry:if="{ds_RowCount} != 0">
<table border="1" spry:repeatchildren="dsStates" spry:test="'{name}'.match(/^[amn]/i);" spry:choose="choose">
	<tr spry:when="'{name}'.match(/^n/i);" style="background-color: red;"><td>{name}</td></tr>
	<tr spry:when="'{name}'.match(/^m/i);" style="background-color: blue;"><td>{name}</td></tr>
	<tr spry:when="'{name}'.match(/^a/i);" style="background-color: green;"><td>{name}</td></tr>
</table>
</div>

And here is the actual table:

{name}
{name}
{name}