But what if we want to display dynamic content? How can we display information and keep it up to date as it changes? Let's display the content of a tiddler field.

The tiddlerfield-norefresh.js which defines the tiddlerfield widget is almost the same as hello.js except for this part:

MyWidget.prototype.render = function(parent,nextSibling) {
	this.parentDomNode = parent;
	var text = this.wiki.getTiddlerText("test", "<empty>")
	var textNode = this.document.createTextNode(text);
	parent.insertBefore(textNode,nextSibling);
	this.domNodes.push(textNode);
};

Instead of creating the text dom node from a static string, the text field of the test tiddler is used. This is similar to using the view widget like this: <$view tiddler="test"/>

Here's how it looks (see Widget refresh demo I to look at the code):

Notice if you change the text in the input box, the output from the tiddlerfield widget doesn't change, but the output of the view widget does. Only after the Force refresh button is clicked does the output of tiddlerfield update to match the input box contents.

What's going on here? The render method of the widget code is only called by tiddlywiki core when the widget is first created. After that, it isn't called again unless the widget is completely destroyed and then created again.

The tiddlywiki ViewWidget has a properly written refresh method so typing in the input box will cause its content to update. However, the tiddlerfield widget does not have a refresh method at all. It has no way of being notified that the test tiddler content has changed. Its output will not change until the Force refresh button is clicked.

See the next example for an implementation of the refresh method for the tiddlerfield widget.

The code for the refresh button looks like this:

<$button set="!!refresh" setTo={{test}}>Force refresh</$button>

and the widgets are enclosed in a list widget like this:

<$list filter="[{!!refresh}]">...</$list>

When the button is clicked the field refresh in the containing tiddler is modified and it causes the children of the list widget to be created from scratch. The render method is called and the output of the tiddlerfield widget updates.