Conditional content

Conditional content methods

One of the needs of Picker was to be able to access user information stored in a database. If the user information existed, we wanted to display the stored information. If not, the area should remain empty.

In this aspect, the ex:if-exists attribute was insufficient due to its lack of a clear "else" attribute.

Below, a few useful Exhibit constructs found potentially useful for this purpose:

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 below.

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


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