Dojo demo2 - how not to use placeAt / place methods in dojo toolkit.

2021-09-30 21:17:01 +02:00 · 2021-09-30 21:17:01 +02:00 · 4dd5fa2b15
parent 313747938e
commit 4dd5fa2b15
5 changed files with 92 additions and 0 deletions
--- a/dojo_demo2/README.md
+++ 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.
--- a/dojo_demo2/app.js
+++ 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'));
+});
--- a/dojo_demo2/index.html
+++ b/dojo_demo2/index.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Dojo App</title>
+  <meta charset="utf-8" />
+
+  <!--dojoConfig-->
+  <script>
+    dojoConfig = {
+      parseOnLoad: false,
+      async: true,
+      baseUrl: "./",
+      packages: [{
+        name: "widgets",
+        location: "./widgets"
+      }],
+      cacheBust: true // Get "fresh" resources
+    };
+  </script>
+
+  <!--load dojo toolkit-->
+  <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.14.1/dojo/dojo.js"></script>
+
+  <!-- load app js -->
+  <script src="app.js"></script>
+</head>
+
+<body>
+  <div id="appContainer"></div>
+</body>
+
+</html>
--- a/dojo_demo2/widgets/SimpleWidget.html
+++ b/dojo_demo2/widgets/SimpleWidget.html
@ -0,0 +1,16 @@
+<div>
+	Simple Widget
+
+	<div data-dojo-attach-point="point">
+		<span>No implementation to check how different values for domConstruct.place first, last, only and so on will behave</span>
+	</div>
+
+	<button data-dojo-attach-event="onclick: clickMeHandle">Click me</button>
+
+	<ul>
+		<li><a href="https://dojotoolkit.org/api/?qs=1.10/dijit/_WidgetBase">More documentation under this link #1 WidgetBase</a></li>
+
+		<li><a href="https://dojotoolkit.org/reference-guide/1.10/dojo/dom-construct.html">More documentation under this link #2 domConstruct</a></li>
+	</ul>
+
+</div>
--- a/dojo_demo2/widgets/SimpleWidget.js
+++ 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');
+    }
+  });
+});