This page is part of a static HTML representation of the TiddlyWiki at
https://tiddlywiki.com/dev/
Widget attributes demo II
5th February 2019 at 2:50am
[ { "title": "$:/DefaultTiddlers", "text": "[[hello world widget]]" } ] [ { "title": "hello-attribute-optimized.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/*\nRefresh if the attribute value changed since render\n*/\nMyWidget.prototype.refresh = function(changedTiddlers) {\n\t// Find which attributes have changed\n\tvar changedAttributes = this.computeAttributes();\n\tif (changedAttributes.message) {\n\t\tthis.refreshSelf();\n\t\treturn true;\n\t} else {\n\t\treturn false;\n\t}\n};\n\nexports.hello = MyWidget;\n\n})();\n", "created": "20190205024846183", "modified": "20190205025110882", "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" } ]