allow nested props to be set by watch attribute function

remake · Jul 11, 2019 · d308cd3 · d308cd3
1 parent d42600f
commit d308cd3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/dist/bundle.cjs.js b/dist/bundle.cjs.js
diff --git a/dist/bundle.es6.js b/dist/bundle.es6.js
@@ -1720,7 +1720,6 @@ function getDataFromRootNode(rootNode) {
   return getDataFromDom(rootNode);
 }
 
-var elemProps = ["id", "className", "type", "src", "value", "checked", "innerText", "innerHTML", "style", "title", "alt", "for", "placeholder"];
 var optionsData = {
   // default watch functions
   watchFunctions: {
@@ -1733,12 +1732,19 @@ var optionsData = {
           watchFuncName = _ref.watchFuncName,
           watchFuncArgs = _ref.watchFuncArgs,
           dataTargetElem = _ref.dataTargetElem;
-
-      // if func is a valid property, set the first arg as its value
-      if (elemProps.includes(watchFuncName)) {
-        watchElem[watchFuncName] = value;
-      } // if func is a data attribute, set the first arg as its value
-
+      // if func is a valid elem property, set that prop to the new value (allow nested props)
+      var listOfProps = watchFuncName.split(".");
+      var currentObj = watchElem;
+      listOfProps.forEach(function (propName, index) {
+        if (index + 1 < listOfProps.length) {
+          currentObj = currentObj[propName];
+        } else {
+          currentObj[propName] = value;
+        }
+      }); // if (elemProps.includes(watchFuncName)) {
+      //   watchElem[watchFuncName] = value;
+      // }
+      // if func is a data attribute, set the first arg as its value
 
       if (watchFuncName.startsWith("data-")) {
         watchElem.setAttribute(watchFuncName, value);

diff --git a/src/inputjs/optionsData.js b/src/inputjs/optionsData.js
@@ -1,18 +1,34 @@
 let elemProps = ["id", "className", "type", "src", "value", "checked", "innerText", "innerHTML", "style", "title", "alt", "for", "placeholder"];
 
 export default {
+
   // default watch functions
   watchFunctions: {
     "*": function ({watchElem, watchAttrName, camelCaseKeyName, value, dataSourceElem, watchFuncName, watchFuncArgs, dataTargetElem}) {
-      // if func is a valid property, set the first arg as its value
-      if (elemProps.includes(watchFuncName)) {
-        watchElem[watchFuncName] = value;
-      }
+
+      // if func is a valid elem property, set that prop to the new value (allow nested props)
+      let listOfProps = watchFuncName.split(".");
+      let currentObj = watchElem;
+      listOfProps.forEach((propName, index) => {
+        if (index + 1 < listOfProps.length) {
+          currentObj = currentObj[propName];
+        } else {
+          currentObj[propName] = value;
+        }
+      });
+
+      // if (elemProps.includes(watchFuncName)) {
+      //   watchElem[watchFuncName] = value;
+      // }
 
       // if func is a data attribute, set the first arg as its value
       if (watchFuncName.startsWith("data-")) {
         watchElem.setAttribute(watchFuncName, value);
       }
+
     }
   }
-};
+};
+
+
+