The <- notation: for iteration

The following example show nested iterations and the usage of the <- notation

The HTML:

<table class="scoreBoard">
  <tbody>
    <tr>
      <td class="teamName">Team Name</td>
      <td class="teamPlace">
        <table class="teamList">
          <thead>
            <tr>
              <th class="position">Position</th>
              <th class="player">Player</th>
              <th class="score">Score</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="position">1</td>
              <td class="player">Chloe</td>
              <td class="score">20</td>
            </tr>
          <tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

The JSON data:

var context = {
  'teams': [{
    'name':'Cats',
    'players':[
      {"name":"Alice Keasler", "score":14}, 
      {"name":"", "score":0},  //show an example of space and zero
      {"name":"Vicky Benoit", "score":5}, 
      {"name":"Wayne Dartt", "score":11}]},{

    'name':'Dogs',
    'players': [
      {"name":"Ray Braun", "score":14}, 
      {"name":"Aaron Ben", "score":24}, 
      {"name":"Steven Smith", "score":1}, 
      {"name":"Kim Caffey", "score":19}]},{
				
    'name':'Mices',
    'players': [
      {"name":"Natalie Kinney", "score":16}, 
      {"name":"Caren Cohen", "score":3}]}]}

The Javascript to do this action (here with jQuery):

var scoreBoard = $('table.scoreBoard').$pMap({
  'tbody tr': 'team <- teams',
  'td.teamName': 'team.name'
});
		
var teamList = $('table.teamList', scoreBoard)
  .$pMap({
    'tbody tr': 'player <- team.players',
    'td.player': 'player.name',
    'td.score': 'player.score',
    'td.position': lineNb, 
    'tbody tr[class]': 
       function(context, items, pos){ 
         return row.decorator(context, items, pos) } } ); 

  $('td.teamPlace', scoreBoard).html(teamList); 
  $p.compile(scoreBoard, 'f5'); 
  $('div#render5').html( $p.render('f5', context) );}

We’ll explain the <- symbol by some examples:

The following directive:

{ 'tbody tr': 'team <- teams' }

Means:

• Repeat the TR element … ( because of the <- )
• for each item found in the array ‘teams’. As from revision 1.19 it is possible to loop on object collections too.
• and during the loop this item will be called ‘team’

The following directives:

{ 'li' : 'level1 <-' }

or
{ ‘li’ : ‘level1<-context’ }

Means:

• Repeat the LI element (<-)
• for each item found in the root of the JSON (we call it the context of the transformation)
  As there is nothing on the right of the symbol.
  
• and during the loop the item will be called level1.
  We will be then able to call its properties. For instance level1.url

Note:

Here we used the compile method.Instead of calling render directly.

See how you can optimize your response time using compile and give a name to your function.