optimize events and create bind event

kbrsh · Jun 28, 2018 · 871e598 · 871e598
1 parent b7fc498
commit 871e598
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/dist/moon.js b/dist/moon.js
@@ -23,10 +23,11 @@
 			if (name === undefined || globals.indexOf(name) !== -1) {
 				return match;
 			} else {
+				dynamic = true;
+
 				if (name[0] === "$") {
 					return ("locals." + name);
 				} else {
-					dynamic = true;
 					return ("instance." + name);
 				}
 			}
@@ -481,9 +482,20 @@
 					var attributeCode = (void 0);
 
 					if (attribute.key[0] === "@") {
-						var eventHandler = root.nextElement++;
-						createCode$1 += addEventListener(element.element, attribute.key.substring(1), ("function($event){" + (getElement(eventHandler)) + "($event);}"));
-						attributeCode = setElement(eventHandler, ("function($event){locals.$event=$event;" + (attributeValue(attribute)) + ";};"));
+						var eventType = (void 0), eventHandler = (void 0);
+
+						if (attribute.key === "@bind") {
+							var bindVariable = attributeValue(attribute);
+							attributeCode = (getElement(element.element)) + ".value=" + bindVariable + ";";
+							eventType = "input";
+							eventHandler = bindVariable + "=$event.target.value;instance.update();";
+						} else {
+							attributeCode = "";
+							eventType = attribute.key.substring(1);
+							eventHandler =	"locals.$event=$event;" + (attributeValue(attribute)) + ";";
+						}
+
+						createCode$1 += addEventListener(element.element, eventType, ("function($event){" + eventHandler + "}"));
 					} else {
 						attributeCode = setAttribute(element.element, attribute);
 					}

diff --git a/dist/moon.min.js b/dist/moon.min.js
diff --git a/src/compiler/generator/generator.js b/src/compiler/generator/generator.js
@@ -123,9 +123,20 @@ export const generateAll = (element, parent, root, insert) => {
 				let attributeCode;
 
 				if (attribute.key[0] === "@") {
-					const eventHandler = root.nextElement++;
-					createCode += addEventListener(element.element, attribute.key.substring(1), `function($event){${getElement(eventHandler)}($event);}`);
-					attributeCode = setElement(eventHandler, `function($event){locals.$event=$event;${attributeValue(attribute)};};`);
+					let eventType, eventHandler;
+
+					if (attribute.key === "@bind") {
+						const bindVariable = attributeValue(attribute);
+						attributeCode = `${getElement(element.element)}.value=${bindVariable};`;
+						eventType = "input";
+						eventHandler = `${bindVariable}=$event.target.value;instance.update();`;
+					} else {
+						attributeCode = "";
+						eventType = attribute.key.substring(1);
+						eventHandler =	`locals.$event=$event;${attributeValue(attribute)};`;
+					}
+
+					createCode += addEventListener(element.element, eventType, `function($event){${eventHandler}}`);
 				} else {
 					attributeCode = setAttribute(element.element, attribute);
 				}

diff --git a/src/compiler/parser/template.js b/src/compiler/parser/template.js
@@ -8,10 +8,11 @@ export const parseTemplate = (expression) => {
 		if (name === undefined || globals.indexOf(name) !== -1) {
 			return match;
 		} else {
+			dynamic = true;
+
 			if (name[0] === "$") {
 				return `locals.${name}`;
 			} else {
-				dynamic = true;
 				return `instance.${name}`;
 			}
 		}