rendered paste body<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://github.com/pure/pure/raw/master/libs/pure.js"></script> <script type="text/javascript"> var Container = new ObjectContainer.data = { 'airports': [ { 'airport': 'CC', 'gates': [ { 'gate': 1, 'flights': [ { 'number': 1, 'airline': 'A', 'destination': 'Calcuta', duration: 15, description: 'Well, that would be an amazing new definition' } ] }, { 'gate': 2, 'flights': [ { 'number': 2, 'airline': 'B', 'destination': 'Belfast', duration: 1, description: 'If unreachable then yes, it should be collected.' } ] }, { 'gate': 5, 'flights': [ { 'number': 11, 'airline': 'X', 'destination': 'Chile', duration: 2, description: 'The problem has always been counting cycles. ' } ] } ] }, { 'airport': 'DD', 'gates': [ { 'gate': 1, 'flights': [ { 'number': 1, 'airline': 'A', 'destination': 'Guinea', duration: 5, description: 'Creating an element is such count is non-zero.' } ] }, { 'gate': 12, 'flights': [ { 'number': 21, 'airline': 'W', 'destination': 'Greenland', duration: 11, description: 'So cold' }, { 'number': 22, 'airline': 'W', 'destination': 'Alaska', duration: 12, description: 'So cold too' } ] } ] } ]}; Container.directive1 = { "table.airports tbody tr.airport": { "airport<-airports": { "td span.airportName": "Airport #{airport.airport}", "td span@onclick" : function(args) { var data = JSON.stringify(args.item); return 'Container.render2('+data+')'; }, 'td.airport table@id' : 'gates#{airport.airport}' } }}Container.directive2 = { "tbody tr.gate" : { "gate<-gates" : { "td.gate span.gateNumber" : 'Gate #{gate.gate}', "td.gate span@onclick" : function(args) { var data = JSON.stringify(args.item); return 'Container.render3('+data+',"'+args.context.airport+'")'; }, "td.gate table@id" : function(args) { return ['flight',args.context.airport,args.item.gate].join(''); } } }}Container.render2 = function(data) { $("#gates"+data.airport).render(data,Container.directive2); $("#gates"+data.airport).show();}Container.directive3 = { "tbody.flightInfo tr" : { 'flight<-flights' : { "td.number" : 'flight.number', "td.airline" : 'flight.airline', "td.destination" : 'flight.destination', "td.duration" : 'flight.duration', 'td.description' : 'flight.description' } }}Container.render3 = function(data, airport) { $('#flight'+airport+''+data.gate).render(data,Container.directive3); $('#flight'+airport+''+data.gate).show();} $(document).ready(function() { $('#container').render(Container.data, Container.directive1); }); </script> </head><body><div id="container"><table class="airports"> <tbody> <tr class="airport"> <td class="airport"> <span class="airportName">airportName</span> <br /> <table class="gates" style="display:none"> <tbody> <tr class="gate"> <td class="gate"> <span class="gateNumber">gateNumber</span> </br> <table class="flight" style="display:none"> <thead> <tr> <th>#</th> <th>Airline</th> <th>Destination</th> <th>Duration</th> <th>Description</th> </tr> </thead> <tbody class="flightInfo"> <tr> <td class="number" >#</td> <td class="airline" >airline</td> <td class="destination" >destination</td> <td class="duration" >duration</td> <td class="description">description</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody></table></div>