This page is part of a static HTML representation of the TiddlyWiki at
https://tiddlywiki.com/dev/
Widget attributes demo I
4th February 2019 at 3:15am
[ { "title": "$:/DefaultTiddlers", "text": "[[hello world widget]]" } ] [ { "title": "hello-attribute.js", "text": "/*\\\n\nHello, World widget\n\n\\*/\n(function() {\n\n/*jslint node: true, browser: true */\n/*global $tw: false */\n\"use strict\";\n\nvar Widget = require(\"$:/core/modules/widgets/widget.js\").widget;\n\nvar MyWidget = function(parseTreeNode, options) {\n\tthis.initialise(parseTreeNode, options);\n};\n\n/*\nInherit from the base widget class\n*/\nMyWidget.prototype = new Widget();\n\n/*\nRender this widget into the DOM\n*/\nMyWidget.prototype.render = function(parent, nextSibling) {\n\tthis.parentDomNode = parent;\n\tthis.computeAttributes();\n\tvar message = this.getAttribute(\"message\", \"World\");\n\tvar textNode = this.document.createTextNode(\"Hello, \" + message + \"!\");\n\tparent.insertBefore(textNode, nextSibling);\n\tthis.domNodes.push(textNode);\n};\n\n/*\nA widget with optimized performance will selectively refresh, but here we refresh always\n*/\nMyWidget.prototype.refresh = function(changedTiddlers) {\n\t// Regenerate and rerender the widget and\n\t// replace the existing DOM node\n\tthis.refreshSelf();\n\treturn true;\n};\n\nexports.hello = MyWidget;\n\n})();\n", "created": "20190204020011193", "modified": "20190204030332147", "module-type": "widget", "tags": "", "type": "application/javascript" } ] [ { "title": "hello world widget", "text": "\n```\n<$hello/>\n```\n\nRenders as:\n\n<$hello/>\n\n---\n\n```\n<$hello message=\"pale blue dot\"/>\n```\n\nRenders as:\n\n<$hello message=\"pale blue dot\"/>\n\n---\n\n<$edit-text focus=yes tiddler=test tag=input/>\n\n```\n<$hello message={{test!!text}}/>\n```\n\nRenders as:\n\n<$hello message={{test!!text}}/>\n\n" } ] [ { "title": "test", "text": "Alice" } ]