feat: support for value-type attribute to define if render will be a string, text, innerHTML. Defaults to innerHTML

frankpagan · frankpagan · commit a14fcc2ff886 · 2022-07-03T17:19:00.000Z
diff --git a/demo/render.array.html b/demo/render.array.html
@@ -19,8 +19,8 @@ <h4>{{domains}}</h4>
                 </cc-options>
 
             <div class="template" template_id="abc1">
-                <div class="template" render-array="data.current_org" render-key="current_org"  value="{{current_org}}">
-                    <h3>{{current_org}}</h3>
+                <div class="template" render-array="data.current" render-key="current_org"  value="{{current_org.name}}">
+                    <h3>{{current_org.name}}</h3>
                 </div>
             </div>
      
@@ -34,7 +34,8 @@ <h1>Paste in your browser console</h1>
                     collection : 'dededede',
                     data: [{
                          _id : '123kijfhgfkel45',
-                         current_org: ['test1', 'test2', 'test31', 'test3']
+                         current_org: ['test1', 'test2', 'test31', 'test3'],
+                         current: [{name: 'test1w'}, {name: 'test2'}, {name: 'test31'}, {name: 'test3'}]
                      }]
                 }
                 
diff --git a/demo/render.object.html b/demo/render.object.html
@@ -11,8 +11,8 @@
     <body>
         
         <div class="template" template_id="abc1">
-            <div>{{data}}</div>
-            <h1> {{data.collection}} {{data._id}}</h1>
+            <!-- <div>{{data}}</div>
+            <h1> {{data.collection}} {{data._id}}</h1> -->
             <div class="template" render-object="" render-key="one">
                 <h5>{{one.key}}: {{one.value}}</h5>
             </div>
diff --git a/src/index.js b/src/index.js
@@ -162,6 +162,13 @@ const CoCreateRender = {
 					}
 				});
 
+				// if (el.classList.contains('template')) {
+				// 	that.render(el, data);
+				// } 
+				// if(el.childNodes.length > 0) {
+				// 	that.setValue(el.childNodes, data, renderKey);
+				// }
+
 				if(el.childNodes.length > 0) {
 					that.setValue(el.childNodes, data, renderKey);
 				}
@@ -171,12 +178,17 @@ const CoCreateRender = {
 			}
 			
 			if (el.nodeType == 3) {
+				let valueType = el.parentElement.getAttribute('value-type')
 				let textContent = el.textContent;
 				let text = that.__replaceValue(data, textContent, renderKey);
 				if (text || text == "") {
-					const newNode = document.createElement('div');
-					newNode.innerHTML = text;
-					el.replaceWith(...newNode.childNodes)
+					if (valueType == 'text' || valueType == 'string'){
+						el.textContent = text;
+					} else {
+						const newNode = document.createElement('div');
+						newNode.innerHTML = text;
+						el.replaceWith(...newNode.childNodes)
+					}
 				}
 			}
 
