1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-15 20:50:27 +00:00
TiddlyWiki5/editions/dev/tiddlers/javascript-widget-tutorial/Widget refresh demo I.tid
btheado 6af3eb539b
Adds a javascript widget tutorial to the dev tiddlywiki edition (#7016)
* Initial widget tutorials extracted from https://btheado.github.io/tw-widget-tutorial/

* Fixes for refresh behavior change
2022-10-30 16:10:12 +00:00

45 lines
1.1 KiB
Plaintext

created: 20190201233806976
modified: 20221029194854112
tags:
title: Widget refresh demo I
type: text/vnd.tiddlywiki
<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
<$list name=refresh filter=[[tiddlerfield-norefresh.js]get[text]]>
<$innerwiki width="600" height="400" style="width:100%;">
<$data title="$:/DefaultTiddlers" text="[[tiddler field widget]]"/>
<$data title="test" text="type new text here"/>
<$data $tiddler=tiddlerfield-norefresh.js/>
<$data title="tiddler field widget" text="""
<$edit-text focus=yes tiddler=test tag=input/>
<$button set="!!refresh" setTo={{test}}>Force refresh</$button>
<$list filter="[{!!refresh}]">
<div>
<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
```
<$tiddlerfield/>
```
Renders as:
<$tiddlerfield/>
</div>
<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
```
<$view tiddler="test"/>
```
Renders as:
<$view tiddler="test"/>
</div>
</div>
</$list>
"""/>
</$innerwiki>
</$list>