Problem with reveal-widget, transclusion and templates

#1

I’d like to add an observation, just for posterity.

I was trying to add a class <div> wrapper inside of a transclusion that I was revealing using a <$reveal> widget using a <$transclude> widget. I know there’s a template attribute that can be applied to the transclude widget to achieve approximately the same as using the {{tiddler||template}} syntax.

This didn’t work:

transclusion

<$transclude tiddler="summary—Mission statement" mode="block" template="$:/templates/aiTransclusion" />

template (a tiddler named $:/templates/aiTransclusion)

<div class="ai">
<transclude />
</div>

This works:

translusion:

{{summary—Research abstract||$:/templates/aiTransclusion}}

template:

<div class="ai">
<$transclude mode="block" />
</div>

I tried a few other variants that didn’t work, such as this:

<$transclude tiddler="summary—Mission statement" mode="block" data-type="ai"/>

…in which case, the CSS would have been selecting for [data-type="ai"] rather than div.ai, and there wouldn’t have been any template.

basis of this observation

The reason I tried using <$transclude> with a template attribute was because I previously solved a similar problem using a <$list> widget and using its template attribute to format the list with a template tiddler.

For curiosity,

Is there some way I could have alternately use a syntaxt like <$list template=$:/templates/aiTransclusion> for my current, straightforward transclusion that simply needs to get wrapped in a div (or alternately get an extra class or other CSS identifier in the HTML element rendered by the transclusion), all of which pops into view using a <$reveal> widget?

Just asking for learning and public documentation purposes.

Show transclusions in specific format
#2

There is no template parameter for the transclude widget.

Transcluded tiddlers are the template, where the currentTiddler variable is set to the tiddler that contains fields that are used in the template.

The currentTiddler variable is defined by the tiddler-widget

{{tiddler-title||template-title}} is a shortcut for

<$tiddler tiddler="tiddler-title">
<$transclde $tiddler="template-title"/>
</$tiddler>

If you use the reveal-widget, it does already create a wrapper element. So you can use the reveal-widget to create a DIV and define a class for that div. So the template may not need an extra div. eg

<$reveal tag="div" class="my-class" ...>
  <$transclude $tiddler= .... />
</$reveal>

The problem with the reveal-widget is, that if it hides the content there is still an empty DIV in the browser DOM. This can cause formatting problems, depending on the CSS applied to this div.

The more modern way to show and hide elements is the conditional-shortcut syntax

The wrapper DIV should only be there if you really need it.

<% if [{$:/state/testl}match[show]] %>
<$tiddler tiddler="tiddler-title">
    <div class="my-class">
        <$transclude $tiddler="template-title" $mode="block"/>
    </div>
</$tiddler>
<% endif %>
1 Like