Best-Practice: Slots

Attempting to populate a jQuery UI Tabs area with a slot; however, this requires that each slot item output data in two areas:

<ul>
   <li>Slot Item 1</li>
   <li>Slot Item 2</li>
   <li>Slot Item 3</li>
</ul>
<div>Slot Item 1</div>
<div>Slot Item 2</div>
<div>Slot Item 3</div>

The possible solution is to loop through the slot’s contents twice for each area calling a different template for each area. Is there an alternative method?

Well if you didn’t want to use velocity to loop through the items twice, you could use jquery to create the first list (ul, lis) based on what you have in the divs.
My suggestion however, would be implement this by making my own slot macro (via the raw slot macro) and calling the slot contents twice…of course if you want active assembly to work well, you might have to fool around with it some…

Thank you for the response. I’m going to try to avoid excessive overhead on the front end; even though, I’m already including jQuery UI. I’m going to try the macro path and see the type of results I get. Still accepting alternatives.

Another alternative is to create a new JQuery UI widget based off the Tabs widget such that the tab portion is created from some special div inside the body div.

So the html could look something like:


<div><div class="ui-mytabs-tabcontent">My Tab Name 1</div>Slot Item 1</div>
<div><div class="ui-mytabs-tabcontent">My Tab Name 2</div>Slot Item 2</div>
<div><div class="ui-mytabs-tabcontent">My Tab Name 3</div>Slot Item 3</div>

You should be able to call the same slot twice and pass different Templates:


#slot("Slotname" "<ul>" "</li>" "</li>" "</ul>" "template=Template1")
#slot("Slotname" "<div>" "" "" "</div>" "template=Template2")

If you’re doing this on a template where you’ll be using Active Assembly, I’ll usually make one of the slots a Raw Slot with no AA code:


#slot("Slotname" "<ul>" "</li>" "</li>" "</ul>" "template=Template1")

#initslot("Slotname"  "template=template2")
  #if($sys.currentslot.relresults.size() > 0)
     <div>
     #foreach( $relresult in $sys.currentslot.relresults )
       $rx.doc.extractBody($relresult) 
     #end
     </div>
  #end
#endslot("Slotname")

Hope this helps

M.

@Rushing: Thank you for the suggestion. If I do not get a usable back end solution then I will probably proceed with a front end solution. It may be inevitable.

@MPMatonis: Thank you for the code reference. I’m going to use what you’ve referred and I’ll post back the results for future reference. :slight_smile:

Update: Went with the

#slot("SlotName" "" "" "" "" "template=TemplateName")##
#initslot("SlotName" "template=TemplateName")##
#if($sys.currentslot.relresults.size() > 0)
	#foreach( $relresult in $sys.currentslot.relresults )
		$rx.doc.extractBody($relresult)
	#end
#endslot("SlotName")

Had to use the tips found at http://forum.percussion.com/showthread.php?t=4423 to disable the output of the initslot due to conflicts between Dojo and jQuery.