From 4dd5fa2b154282cd377f05041d319d087a73153b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20P=C3=B3=C5=82grabia?= Date: Thu, 30 Sep 2021 21:17:01 +0200 Subject: [PATCH] Dojo demo2 - how not to use placeAt / place methods in dojo toolkit. --- dojo_demo2/README.md | 8 +++++++ dojo_demo2/app.js | 9 ++++++++ dojo_demo2/index.html | 33 ++++++++++++++++++++++++++++ dojo_demo2/widgets/SimpleWidget.html | 16 ++++++++++++++ dojo_demo2/widgets/SimpleWidget.js | 26 ++++++++++++++++++++++ 5 files changed, 92 insertions(+) create mode 100644 dojo_demo2/README.md create mode 100644 dojo_demo2/app.js create mode 100644 dojo_demo2/index.html create mode 100644 dojo_demo2/widgets/SimpleWidget.html create mode 100644 dojo_demo2/widgets/SimpleWidget.js diff --git a/dojo_demo2/README.md b/dojo_demo2/README.md new file mode 100644 index 0000000..524ffa0 --- /dev/null +++ b/dojo_demo2/README.md @@ -0,0 +1,8 @@ +# How to run it + + npx serve + +# Why this demo has been made? + +1. Well, some wise people think it's wise to use domConstruct.place or widget.placeAt with 'last' mode in the updateUI (like one) method to replace content of the widget. Well, it tends to escalate pretty quickly in zombie-copy-like duplicated way. +2. I was bored enough to get to know how dojo toolkit works. \ No newline at end of file diff --git a/dojo_demo2/app.js b/dojo_demo2/app.js new file mode 100644 index 0000000..fac6bc1 --- /dev/null +++ b/dojo_demo2/app.js @@ -0,0 +1,9 @@ +require([ + 'dojo/dom', + 'dojo/dom-construct', + 'widgets/SimpleWidget.js', +], function(dom, domConstruct, SimpleWidget) { + new SimpleWidget({}) + .placeAt( + dom.byId('appContainer')); +}); \ No newline at end of file diff --git a/dojo_demo2/index.html b/dojo_demo2/index.html new file mode 100644 index 0000000..d140328 --- /dev/null +++ b/dojo_demo2/index.html @@ -0,0 +1,33 @@ + + + + + Dojo App + + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/dojo_demo2/widgets/SimpleWidget.html b/dojo_demo2/widgets/SimpleWidget.html new file mode 100644 index 0000000..688eaa0 --- /dev/null +++ b/dojo_demo2/widgets/SimpleWidget.html @@ -0,0 +1,16 @@ +
+ Simple Widget + +
+ No implementation to check how different values for domConstruct.place first, last, only and so on will behave +
+ + + + + +
\ No newline at end of file diff --git a/dojo_demo2/widgets/SimpleWidget.js b/dojo_demo2/widgets/SimpleWidget.js new file mode 100644 index 0000000..cf3417a --- /dev/null +++ b/dojo_demo2/widgets/SimpleWidget.js @@ -0,0 +1,26 @@ +define([ + 'dojo/_base/declare', + 'dojo/dom-construct', + 'dijit/_WidgetBase', + 'dijit/_TemplatedMixin', + 'dojo/text!widgets/SimpleWidget.html' +], function(declare, domConstruct, _WidgetBase, _TemplatedMixin, template) { + return declare([_WidgetBase, _TemplatedMixin], { + templateString: template, + + constructor: function(props) { + this._idx = 0; + }, + + postCreate: function() { + this.inherited(arguments); + }, + + clickMeHandle: function() { + console.log('Click me handle'); + + var item = domConstruct.create('div', { innerHTML: this._idx++ }); + domConstruct.place(item, this.point, 'only'); + } + }); +}); \ No newline at end of file