Skip to content

Commit ec24735

Browse files
frankpaganfrankpagan
committed
feat: improved support for object or array and html template structure
1 parent 17d8775 commit ec24735

File tree

2 files changed

+66
-42
lines changed

2 files changed

+66
-42
lines changed

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</head>
88
<body>
99

10-
<div template_id="abc1" fetch-collection="render_test">
10+
<div template_id="abc1">
1111
<div class="template card {{render2.collection}} card margin:10px firstname"
1212
data-value="{{render2.data._id}}"
1313
template_id="abc1"

‎src/index.js‎

Lines changed: 65 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
/**
2-
* change name Class
3-
* add functionality to add value on any attr of each elements into template
4-
*/
1+
2+
// import action from '@cocreate/action';
3+
54
const CoCreateRender = {
65

76
__getValueFromObject : function(json, path) {
@@ -71,17 +70,23 @@ const CoCreateRender = {
7170
return resultValue;
7271
},
7372

74-
setArray: function(template, data) {
73+
render: function(template, data) {
7574
const type = template.getAttribute('render-array') || "data";
7675
const render_key = template.getAttribute('render-key') || type;
7776
const self = this;
78-
const arrayData = this.__getValueFromObject(data, type);
7977

78+
// const arrayData = this.__getValueFromObject(data, type);
79+
let arrayData = data;
80+
if (!Array.isArray(data))
81+
arrayData = this.__getValueFromObject(data, type);
82+
if (!arrayData){
83+
let cloneEl = this.cloneEl(template);
84+
cloneEl.classList.add('cloned');
85+
template.insertAdjacentHTML('beforebegin', cloneEl.outerHTML);
86+
}
8087
if (type && Array.isArray(arrayData)) {
8188
arrayData.forEach((item, index) => {
82-
83-
let cloneEl = template.cloneNode(true);
84-
cloneEl.classList.remove('template');
89+
let cloneEl = this.cloneEl(template);
8590
cloneEl.classList.add('clone_' + type);
8691
let new_key = render_key;
8792
if (typeof item !== 'object') {
@@ -97,18 +102,27 @@ const CoCreateRender = {
97102
})
98103
}
99104
},
105+
106+
cloneEl: function(template) {
107+
let cloneEl = template.cloneNode(true);
108+
cloneEl.classList.remove('template');
109+
let templateId = cloneEl.getAttribute('template_id')
110+
cloneEl.removeAttribute('template_id');
111+
cloneEl.setAttribute('templateId', templateId);
112+
return cloneEl;
113+
},
100114

101115
setValue:function(els, data, passTo, template){
102116
if (!data) return;
103117
const that = this;
104-
Array.from(els).forEach(e => {
105-
let passId = e.getAttribute('pass_id');
106-
if (passTo && passId != passTo) {
107-
return;
108-
}
109-
Array.from(e.attributes).forEach(attr=>{
118+
Array.from(els).forEach(el => {
119+
// let passId = e.getAttribute('pass_id');
120+
// if (passTo && passId != passTo) {
121+
// return;
122+
// }
123+
Array.from(el.attributes).forEach(attr=>{
110124
let attr_name = attr.name.toLowerCase();
111-
let isPass = false;
125+
// let isPass = false;
112126
let attrValue = attr.value;
113127
attrValue = that.__replaceValue(data, attrValue);
114128

@@ -129,50 +143,60 @@ const CoCreateRender = {
129143
// }
130144
// }
131145
// }
132-
e.setAttribute(attr_name, attrValue);
146+
el.setAttribute(attr_name, attrValue);
133147
}
134148
});
135149

136-
if (e.children.length == 0 && e.textContent) {
137-
let textContent = e.textContent;
150+
if (el.children.length == 0 && el.textContent) {
151+
let textContent = el.textContent;
138152
textContent = that.__replaceValue(data, textContent);
139153
if (textContent) {
140-
e.textContent = textContent;
154+
el.textContent = textContent;
141155
}
142156
}
143157

144-
145-
146-
if(e.children.length > 0) {
147-
that.setValue(e.children, data)
158+
if(el.children.length > 0) {
159+
that.setValue(el.children, data, passTo, template);
148160
}
149-
if (e.classList.contains('template')) {
150-
that.setArray(e, data);
161+
if (el.classList.contains('template')) {
162+
that.render(el, data);
151163
}
152164

153165
});
154166
},
155167

156168
data: function({selector, data, elements, passTo}) {
157169
if (selector) {
158-
this.render(selector, data);
170+
let template = document.querySelector(selector)
171+
if (!template) return;
172+
this.setValue([template], data, null, template);
159173
} else if (elements) {
160174
this.setValue(elements, data, passTo);
161175
}
162-
},
163-
164-
render : function(selector, dataResult) {
165-
let template_div = document.querySelector(selector)
166-
if (!template_div) {
167-
return;
168-
}
169-
if (Array.isArray(dataResult)) {
170-
template_div.setAttribute('render-array', 'test');
171-
this.setValue([template_div], {test: dataResult});
172-
} else {
173-
this.setValue(template_div.children, dataResult);
174-
}
175176
}
176-
177+
177178
}
179+
180+
// function renderKey(element) {
181+
// const container = element.closest("form") || document;
182+
// let data = form.getFormData(this.id, 'renderKey', container);
183+
184+
// CoCreateRender.data({
185+
// selector: "[template_id='renderKey']",
186+
// data: data
187+
// });
188+
189+
// document.dispatchEvent(new CustomEvent('renderKey', {
190+
// detail: { data }
191+
// }));
192+
// }
193+
194+
// action.init({
195+
// action: "renderKey",
196+
// endEvent: "renderKey",
197+
// callback: (btn, data) => {
198+
// renderKey(btn);
199+
// }
200+
// });
201+
178202
export default CoCreateRender;

0 commit comments

Comments
 (0)