$tw.wiki.renderTiddler("text/html", tiddler); & templates

271 views
Skip to first unread message

James Anderson

unread,
May 9, 2021, 2:24:54 PM5/9/21
to TiddlyWiki
Hello,

I'm trying to render a tiddler within another tiddler via a widget. I have attached a basic example in which i have a widget "twsr" which will schedule tiddlers, that match the tags in the parent tiddler, to be shown in the parent for the user to grade (basically a cersion of https://en.wikipedia.org/wiki/SuperMemo in TW)

In this case i have tiddler "study fruits" which is tagged "fruit" and "veg" it should pick up any other tiddlers tagged with these and show them in "study fruits" one by one for grading. In this example the first one it will show is the "figs" tiddler.

I'm calling "var cnt = $tw.wiki.renderTiddler("text/html", tiddler);" in the twsr widget to render the tiddler.

"fig" uses "Fruit Template" tiddler which is a simple tiddler containing:

<$view field="title"/>

If i view fig individually i see what i expect. However rendering "fig" via $tw.wiki.renderTiddler("text/html", tiddler); in "Study Fruits" is not what i expect (basically the title via the view field is missing) What is the correct way to do this?

Thanks
James




twsr-example.html

James Anderson

unread,
May 10, 2021, 8:32:03 AM5/10/21
to TiddlyWiki
in a tiddler {{fig}} works transcluded into another widget, so i guess i'm asking : what it the widget way of performing/rendering a transclusion?

Saq Imtiaz

unread,
May 10, 2021, 8:56:31 AM5/10/21
to TiddlyWiki
Make a parse tree including a transclude widget or look at the wiki.makeTranscludeWidget method.

James Anderson

unread,
May 10, 2021, 4:27:17 PM5/10/21
to TiddlyWiki
Thanks,

what does $tw.wiki.makeTranscludeWidget("fig"); actually return?  what should i be setting the contents of my DOM node to with the object returned from this?

Thanks,
James

Saq Imtiaz

unread,
May 10, 2021, 4:35:09 PM5/10/21
to TiddlyWiki
I recommend looking at the source code for that method, as well as how it is used other places in the core. Either use grep on the command line, or the github search is actually pretty good: https://github.com/Jermolene/TiddlyWiki5/search?q=makeTranscludeWidget

 If you get stuck and still can't figure it out, please post the code for your widget.


James Anderson

unread,
May 10, 2021, 4:45:46 PM5/10/21
to TiddlyWiki
thanks again.

For future google searchers:

```
var target = _this.document.createElement("div");
var tiddler = "the name of the tiddler you want to transclude";
..
var t = $tw.wiki.makeTranscludeWidget(tiddler, {document:document});
target.innerHTML = "";
t.render( target, null);
```

James Anderson

unread,
May 16, 2021, 2:54:21 PM5/16/21
to TiddlyWiki
Actually, this is still not quite right it seems:

I have attached an example of this still not working.

I have a template tiddler:

```
created: 20210502165510840
modified: 20210502165528840
title: template_example

| !transcluded title|  <$list filter="[list[!!title]]"><$view field="title"/> </$list> |
```

and a tiddler referencing this:

```
created: 20210502165510840
modified: 20210502165528840
twsr_interval: 20210504165528840
tags: fruit
title: banana

{{||template_example}}
```

then in my widget i try to render the "banana" tiddler into a div i have created called card:

```
var t = $tw.wiki.makeTranscludeWidget(tiddler, {document:document, mode:"block", recursionMarker:"yes" });
card.innerHTML = "";
t.render(card,null);
```

but it seems the transclusion is incorrect somehow, any ideas? 

キャプチャ.PNG
broken_transclude.html

Saq Imtiaz

unread,
May 16, 2021, 5:49:13 PM5/16/21
to TiddlyWiki
I assume card is a DOM node. Did you create it? If so, have you attached it to the document somewhere?

A good approach, both for debugging and for asking for assistance, is to create a minimal test case that illustrates the problem you are facing.

Saq Imtiaz

unread,
May 16, 2021, 6:01:14 PM5/16/21
to TiddlyWiki
Also if you want to transclude a tiddler literally and not as a template, try passing a variables hashmap as part of options to makeTranscludeWidget, setting the value of currentTiddler.

James Anderson

unread,
May 16, 2021, 6:11:48 PM5/16/21
to TiddlyWiki
yeah the attached example is a minimal tiddlwyiki with a custom midget showing the problem. Surely some other widgets out there are doing custom transclusions. 

basically in wiki text {{banana}} works within another tiddler

But the js / widget code i have is not right, it does seem to be picking up the template that banana is using, but not the values from within banana that normally populate that template. It is using a DOM node i created from the document, 

Sounds like it might be the variables thing you mentioned. How do i get a variables hashmap from a given tiddler?

Joshua Fontany

unread,
May 16, 2021, 7:23:27 PM5/16/21
to TiddlyWiki
When the TW parser unpacks {{banana}} it renders the same widget nodes as:
```
<$tiddler tiddler="banana">
<$transclude tiddler=<<currentTiddler>> field="text"/>
</$tiddler>
```

In order for your widget to invoke the same widget nodes, it has to set the <<currentTiddler>> variable to the same tiddler you are transcluding.

Best,
Joshua Fontany

TW Tones

unread,
May 16, 2021, 7:47:21 PM5/16/21
to TiddlyWiki
Folks esp James.

It seems to me such threads as this one belong in the dev discussions. I see an increasing number being posted that would be better not in the user group. The reason is if we want to subscribe too many conversations are not only not relevant to use4rs but it could scare people off, if they think they need eventually need to understand this. Whilst the deve GG still exists https://groups.google.com/g/tiddlywikidev it is recommended you move to GitHub discussions https://github.com/Jermolene/TiddlyWiki5/discussions.

Not withstanding the above many times someone starts referring to Javascript they are coders who are not utilising tiddlywiki existing features to get things done and are reverting to Javascript unnecessarily.

I am starting the Sydney TWIG and hoping for an influx of new users. Its hard to argue tiddlywiki is democratising tech if to new users its full of indecipherable code (from their viewpoint).  Monitoring the GG is a good way to learn if you are a newcomer.

Your thoughts please.
Tones

James Anderson

unread,
May 17, 2021, 2:26:20 AM5/17/21
to TiddlyWiki
hey Tones,

I wasn't sure of the split. i guessed TW dev was for people developing the core TW, but if it's for any devs using it to create plugins and so on I can definitely take similar questions there.

Thanks,
James

Saq Imtiaz

unread,
May 17, 2021, 3:55:15 AM5/17/21
to TiddlyWiki
@James don't worry about it. Fact of the matter is that the group description and introductory text does not make this clear, in fact it states that Github is for TiddlyWiki core development discussions. 

We try to be welcoming of newcomers regardless of where you may end up first posting, just as we are of non-developers engaging over at Github. JavaScript developers are in short supply in this community and one of the main things holding back innovation and progress in my opinion, so please don't feel discouraged to ask questions. The discussions section over at Github is probably the best place to post JavaScript related questions: https://github.com/Jermolene/TiddlyWiki5/discussions

Cheers,
Saq

James Anderson

unread,
May 17, 2021, 5:12:19 AM5/17/21
to TiddlyWiki
```
var t = $tw.wiki.makeTranscludeWidget(tiddler, {document:document, variables:{"currentTiddler":tiddler}});
card.innerHTML = "";
t.render(card,null);
activeCard = tiddler;
```

Is the correct answer, saq mentioned it in other words before. I'm just not very familiar with tw dev parlance.

thanks everyone
Reply all
Reply to author
Forward
0 new messages