Exhibit/Conditional content

From SIMILE Widgets

Conditional content methods

The expression ex:if-exists is the simplest but most common way to access information in a database. An example from the tutorial:

<div ex:if-exists=".co-winner" class="co-winners">Co-winners: 
  <span ex:content=".co-winner"></span>
</div>

If a co-winner exists, the stored information is displayed. If not, the area remains empty. But the ex:if-exists attribute is not very powerful, because it has no "else" attribute.

There are a few ways to approach "else" conditions in Exhibit. Exhibit offers a "switch" element on properties. Here, the div stays empty if Class.offering is 'Currently Offered,' otherwise it displays the .offering status.

<div ex:select=".offering">
  <div ex:case="Currently Offered"></div>
  <div ex:content=".offering" class="no-offering"></div>
</div>

Though there doesn't exist an actual ex:else-exists attribute, there is simple if/else logic available, as shown in these two examples (you may or may not need curled braces, depending on where you're using this code).

<div ex:content="if(exists(.url), .url, 'no link')">
<div ex:content="{{ if( exists(.url), .url, concat('http://course.mit.edu', .id) ) }}">

There is also the ex:if attribute. An example:

<div ex:if="contains(.ResourceOwner, 'Other')">
  <span>ResourceOwner: <img src="image.jpg"/> 
    <span ex:content=".ResourceOwner">
    </span>
  </span>
</div> 

Finally, to display more complex content conditionally, dynamic styles can be used to toggle the display of the correct div instead, similar to the technique used in Dynamic URLs.

<div ex:display-style-subcontent="{{ if(exists(!class-user-rating-of), 'block', 'none') }}">
  Your Rating: <span ex:content="!class-user-rating-of.rating"></span>
</div>
<div ex:display-style-subcontent="{{ if(not(exists(!class-user-rating-of)), 'block', 'none') }}">
  Rate this: (insert rating element here)
</div>

Note: Perhaps there is a correct way to do this. A snippet of code found in Picker's browse.html:

<span ex:if="contains(.has-final, 'true')">
  <span class="hasfinal"> +final</span>
  <span></span>
</span>

Note: a useful regular expression to find examples of ex:___-(sub)content:

grep -R 'ex:[a-zA-Z]*\-\(sub\)*content' ./*.html