feat: Observer

herrero-tranquilo · Aug 22, 2021 · 42c73d9 · 42c73d9
1 parent e1debfa
commit 42c73d9
Show file tree

Hide file tree

Showing 3 changed files with 221 additions and 113 deletions.
diff --git a/JS/src/objectOrientationProgramming/index.html b/JS/src/objectOrientationProgramming/index.html
@@ -10,6 +10,7 @@
 		<section id="target" data-viewmodel="wrapper">
 			<h2 data-viewmodel="title"></h2>
 			<section data-viewmodel="contents"></section>
+            <input type="text" data-viewmodel="input">
 		</section>
 	</body>
 </html>
diff --git a/JS/src/objectOrientationProgramming/index.js b/JS/src/objectOrientationProgramming/index.js
@@ -1,27 +1,61 @@
-const { type, ViewModel, BinderItem, Binder, Processor, Scanner } = require("./util.js");
+const {
+	ViewModel,
+	Processor,
+	Scanner,
+} = require("./util.js");
 
 (() => {
+	const scanner = new Scanner();
+	const binder = scanner.scan(document.querySelector("#target"));
+	binder.addProcessor(
+		new (class extends Processor {
+			_process(vm, el, k, v) {
+				el.style[k] = v;
+			}
+		})("styles"),
+	);
+	binder.addProcessor(
+		new (class extends Processor {
+			_process(vm, el, k, v) {
+				el.setAttribute(k, v);
+			}
+		})("attributes"),
+	);
+	binder.addProcessor(
+		new (class extends Processor {
+			_process(vm, el, k, v) {
+				el[k] = v;
+			}
+		})("properties"),
+	);
+	binder.addProcessor(
+		new (class extends Processor {
+			_process(vm, el, k, v) {
+				el["on" + k] = (e) => v.call(el, e, vm);
+			}
+		})("events"),
+	);
 	const viewmodel = ViewModel.get({
+		isStop: false,
 		changeContents() {
-			this.wrapper.styles.background = `rgb(
-                    ${parseInt(Math.random() * 150) + 100},
-                    ${parseInt(Math.random() * 150) + 100},
-                    ${parseInt(Math.random() * 150) + 100}
-                )`;
+			this.wrapper.styles.background = `rgb(${
+				parseInt(Math.random() * 150) + 100
+			},${parseInt(Math.random() * 150) + 100},${
+				parseInt(Math.random() * 150) + 100
+			})`;
 			this.contents.properties.innerHTML = Math.random()
 				.toString(16)
 				.replace(".", "");
 		},
 		wrapper: ViewModel.get({
-			isStop: false,
 			styles: {
 				width: "50%",
 				background: "#ffa",
 				cursor: "pointer",
 			},
 			events: {
 				click(e, vm) {
-					vm.isStop = true;
+					vm.parent.isStop = true;
 				},
 			},
 		}),
@@ -32,46 +66,28 @@ const { type, ViewModel, BinderItem, Binder, Processor, Scanner } = require("./u
 		}),
 		contents: ViewModel.get({
 			properties: {
-				innerHTML: "contents",
+				innerHTML: "Contents",
+			},
+		}),
+		input: ViewModel.get({
+			properties: {
+				value: "Title",
+			},
+			events: {
+				input(e, vm) {
+					if (e.isComposing) return;
+					vm.properties.value = e.target.value;
+				},
+				blur(e, vm) {
+					vm.properties.value = e.target.value.trim();
+				},
 			},
 		}),
 	});
-	const scanner = new Scanner();
-	const binder = scanner.scan(document.querySelector("#target"));
-
-	binder.addProcessor(
-		new (class extends Processor {
-			_process(vm, el, k, v) {
-				el.style[k] = v;
-			}
-		})("styles"),
-	);
-	binder.addProcessor(
-		new (class extends Processor {
-			_process(vm, el, k, v) {
-				el[k] = v;
-			}
-		})("properties"),
-	);
-	binder.addProcessor(
-		new (class extends Processor {
-			_process(vm, el, k, v) {
-				el.setAttribute(k, v);
-			}
-		})("attributes"),
-	);
-	binder.addProcessor(
-		new (class extends Processor {
-			_process(vm, el, k, v) {
-				el["on" + k] = (e) => v.call(el, e, vm);
-			}
-		})("events"),
-	);
-
+	binder.watch(viewmodel);
 	const f = (_) => {
 		viewmodel.changeContents();
-		binder.render(viewmodel);
-		if (!viewmodel.wrapper.isStop) requestAnimationFrame(f);
+		if (!viewmodel.isStop) requestAnimationFrame(f);
 	};
 	requestAnimationFrame(f);
 })();