Question

I have a scoreboard on my website that gets scores from an XML file. It’s very easy for others to update, except for highlighting the winner.

This is a sample game from the XML file:

<game>
<month>05</month><day>25</day><year>11</year>
<type>Football</type>
<homeName>Wildcats</homeName><homeScore>45</homeScore><homeWinner></homeWinner>
<awayName>Bruins</awayName><awayScore>55</awayScore><awayWinner>y</awayWinner>
</game>

As you can see, I want them to simply check the winner. However, when it loads in HTML, I want the y to be replaced with an arrow image.

It’s a Spry scoreboard, so here’s the relevant HTML:

<script type="text/javascript">
var dsScoreboard = new Spry.Data.XMLDataSet("scoreboard.xml", "scoreboard/game", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
dsScoreboard.setColumnType("date", "date");
</script>

<div spry:region="dsScoreboard">
<table class="scoreboard" cellspacing="15" cellpadding="0" border="0">
    <tr>
    <td spry:repeat="dsScoreboard">
        <table class="game" cellspacing="0" cellpadding="0" border="0">
        <tr>
        <td class="date month">{month}</td>
        <td class="type" colspan="3">{type}</td>
        </tr>
        <tr>
        <td class="date day">{day}</td>
        <td class="winner">{awayWinner}</td>
        <td class="name">{awayName}</td>
        <td class="score">{awayScore}</td>
        </tr>
        <tr>
        <td class="date year">{year}</td>
        <td class="winner">{homeWinner}</td>
        <td class="name">{homeName}</td>
        <td class="score">{homeScore}</td>
        </tr>
        </table>
    </td>    
    </tr>
</table>
</div>

So the output HTML for the winner cell should be something like:

<td class="winner"><img src="arrow.png" /></td>

instead of:

<td class="winner">y</td>

Can this be easily done? Thank you.

Answer 1

What you want is a spry:choose. I have never used spry, but it’s something vaguely like this:

<td class="winner">
  <span spry:choose="spry:choose">
    <img src="arrow.png" spry:when="'{homeWinner}' == 'y'" />
    <span spry:default="spry:default"></span>
  </span>
</td>