Where’s Lou

A few more tricks added to Spark language. There was a question about how you would have an attribute that is present or not based on a condition. Say you have a bool isFooChecked variable and you want to do the following:

<input type="checkbox"
       name="foo"
       ${isFooChecked ? 'checked=""' : ''}></input>

That doesn’t work of course… Spark elements are parsed by the xml spec. Plus this type of thing really messes with typical xml editors like Visual Studio, so keeping roughly xml spec compatible is one of the goals.

After mucking around with a few different ways you could express a conditional attribute, while trying to keep the attribute valid, one of them really stood out. Since there’s already a ${expr} syntax to output text, adding a ?{expr} to control the output seemed like an intuitive approach.

So the above example becomes:

<input type="checkbox"
       name="foo"
       checked="?{isFooChecked}"></input>

And this also takes care of another common scenario where you’re writing out class names conditionally. Say you’re writing out a menu and you want to mark the first and last items with a special class. Something like this would do that - it also shows how you use some of the new variables spark can provide when you iterate a collection.

<ul class="menublock">
  <li each="var navItem in MainMenuItems"
      class="first?{navItemIsFirst} last?{navItemIsLast}">
    <a href="${navItem.Url}">${H(navItem.Text)}</a>
  </li>
</ul>

Or say you want to have an “alt” class on even rows.

<table class="portfolio">
  <tr each="var holding in CurrentPortfolio.Holdings"
      class="alt?{(holdingIndex % 2) == 0} quoteline">
    <td>${H(holding.Ticker)}</td>
    <td>${holding.Quote.ToString("#,##0.00")}</td>
  </tr>
</table>

Another thing added recently is a streamlined form of a few of the special elements that named things. Like content or macros. Here’s an example of adding material to a content block, a macro declaration, and how the content block would be used later.

<content name="rightrail">
  <h3>See Also</h3>
  <for each="var item in RelatedLinks">
    ${ShowLink(item)}
  </for>
</content>

<macro name="ShowLink" link="RelatedLinkItem">
  <p class="relateditem"><a href="${link.Url}">${H(link.Text)}</a></p>
</macro>

<div class="sidebar">
  <use content="rightrail"/>
</div>

And with the shorter prefix-based variation of these elements.

<content:rightrail>
  <h3>See Also</h3>
  <for each="var item in RelatedLinks">
    ${ShowLink(item)}
  </for>
</content:rightrail>

<macro:ShowLink link="RelatedLinkItem">
  <p class="relateditem"><a href="${link.Url}">${H(link.Text)}</a></p>
</macro:ShowLink>

<div class="sidebar">
  <use:rightrail/>
</div>