Skip to content

Commit e68075a

Browse files
frankpaganfrankpagan
committed
feat: removed render-object and render-array attributes, instead define attribute render and set the dotnotation key of the value you would like to render .
Refactor CoCreateRender to handle dataKeys and improve code readibility This commit refactors CoCreateRender to use dataKeys instead of separate attributes for isRenderObject and isRenderArray. The new approach improves code readibility and makes it easier to add new rendering features.
1 parent f4f59e1 commit e68075a

File tree

3 files changed

+47
-59
lines changed

3 files changed

+47
-59
lines changed

‎demo/render.array.html

+16-28
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,11 @@
1818
</style>
1919

2020
<body>
21-
<filter
22-
template_id="domains"
23-
filter-name="_id"
24-
filter-value="5ff747727005da1c272740ab"></filter>
25-
<cc-options
26-
fetch-collection="organizations"
27-
fetch-name="domains"
28-
template_id="domains"
29-
class="overflow:auto">
30-
<cc-option
31-
class="template display:flex"
32-
template_id="domains"
33-
value="{{domains}}">
34-
<h4>{{domains}}</h4>
35-
</cc-option>
36-
</cc-options>
21+
<div template="abc1" render="document">
22+
<h3>{{document[0]._id}}</h3>
3723

38-
<div template="abc1">
39-
<div
40-
class="template"
41-
render-array="data[0].current"
42-
render-key="current_org"
43-
value="{{current_org.name}}">
44-
<h3>{{current_org.name}}</h3>
24+
<div render="document.current">
25+
<h3>{{document.current.name}}</h3>
4526
</div>
4627
</div>
4728

@@ -53,11 +34,18 @@ <h1>Paste in your browser console</h1>
5334
selector: '[template=abc1]',
5435
data: {
5536
collection : 'dededede',
56-
data: [{
57-
_id : '123kijfhgfkel45',
58-
current_org: ['test1', 'test2', 'test31', 'test3'],
59-
current: [{name: 'test1w'}, {name: 'test2'}, {name: 'test31'}, {name: 'test3'}]
60-
}]
37+
document: [
38+
{
39+
_id : '123',
40+
current_org: ['test1', 'test2'],
41+
current: [{name: 'test1w'}, {name: 'test2'}, {name: 'test31'}, {name: 'test3'}]
42+
},
43+
{
44+
_id : '321',
45+
current_org: ['test2', 'test3'],
46+
current: [{name: 'test1w'}, {name: 'test2'}, {name: 'test31'}, {name: 'test3'}]
47+
}
48+
]
6149
}
6250

6351
})

‎demo/render.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
</style>
1919

2020
<body>
21-
<div template="abc1">
22-
<h3>{{document.collection}}</h3>
21+
<div template="abc1" render>
22+
<h3>{{collection}}</h3>
2323
<h3>{{document._id}}</h3>
2424
</div>
2525

@@ -31,7 +31,7 @@ <h1>Paste in your browser console</h1>
3131
selector: '[template=abc1]',
3232
data: {
3333
collection: 'dededede',
34-
data: {
34+
document: {
3535
_id : '123kijfhgfkel45',
3636
current_org: ['test1', 'test2', 'test31', 'test3'],
3737
current: [{name: 'test1w'}, {name: 'test2'}, {name: 'test31'}, {name: 'test3'}]

‎src/index.js

+28-28
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import uuid from '@cocreate/uuid';
55
import { queryDocumentSelector, getValueFromObject, dotNotationToObject } from '@cocreate/utils';
66
import '@cocreate/element-prototype';
77
import './index.css';
8-
// import api from '@cocreate/api';
98

109
const CoCreateRender = {
1110

@@ -98,7 +97,6 @@ const CoCreateRender = {
9897

9998
render: function (template, data) {
10099
const self = this;
101-
let type = '';
102100
let arrayData = data;
103101

104102
let exclude = template.getAttribute('render-exclude') || ''
@@ -108,50 +106,42 @@ const CoCreateRender = {
108106
exclude = [exclude]
109107
}
110108

111-
let isRenderObject = template.hasAttribute('render-object');
112-
if (isRenderObject) {
113-
const renderObject = template.getAttribute('render-object');
114-
type = renderObject || ''
115-
}
116-
117-
const isRenderArray = template.hasAttribute('render-array');
118-
if (isRenderArray) {
119-
var renderArray = template.getAttribute('render-array');
120-
if (renderArray)
121-
arrayData = data[renderArray];
122-
type = renderArray || '';
123-
}
124-
125-
if (!isRenderArray && !isRenderObject) {
126-
if (!Array.isArray(arrayData) && typeof arrayData == 'object')
127-
isRenderObject = true
109+
let isRenderObject
110+
let dataKey = template.getAttribute('render') || ""
111+
if (dataKey) {
112+
arrayData = getValueFromObject(data, dataKey);
113+
if (!Array.isArray(arrayData)) {
114+
if (typeof arrayData === 'object') {
115+
isRenderObject = true
116+
} else {
117+
console.log(dataKey, 'value must be an objec or an array')
118+
}
119+
}
128120
}
129121

130-
let renderKey = template.getAttribute('render-key') || type;
122+
let renderKey = template.getAttribute('render-key') || dataKey;
131123

132124
if (!template.renderedKeys)
133125
template.renderedKeys = new Map()
134126

135-
if (isRenderObject && type) {
136-
let Data = getValueFromObject(arrayData, type);
137-
let array = self.renderObject(Data, renderKey, exclude)
127+
if (isRenderObject && dataKey) {
128+
let array = self.renderObject(arrayData, renderKey, exclude)
138129
for (let item of array) {
139130
if (!template.renderedKeys.has(item[renderKey].key)) {
140131
template.renderedKeys.set(item[renderKey].key, '')
141132
let cloneEl = this.cloneEl(template);
142133
cloneEl.setAttribute('renderedKey', item[renderKey].key)
143-
self.setValue([cloneEl], item, renderArray, renderKey);
134+
self.setValue([cloneEl], item, dataKey, renderKey);
144135
template.insertAdjacentElement('beforebegin', cloneEl);
145136
}
146137
}
147138
} else {
148-
149139
if (!Array.isArray(arrayData))
150-
arrayData = getValueFromObject(data, type);
140+
arrayData = getValueFromObject(data, dataKey);
151141

152142
if (!arrayData) {
153143
let cloneEl = this.cloneEl(template);
154-
self.setValue([cloneEl], data, renderArray, renderKey);
144+
self.setValue([cloneEl], data, dataKey, renderKey);
155145
template.insertAdjacentElement('beforebegin', cloneEl);
156146
}
157147

@@ -165,7 +155,7 @@ const CoCreateRender = {
165155

166156
let cloneEl = this.cloneEl(template);
167157
let object = self.__createObject(item, renderKey);
168-
self.setValue([cloneEl], object, renderArray, renderKey);
158+
self.setValue([cloneEl], object, dataKey, renderKey);
169159
template.insertAdjacentElement('beforebegin', cloneEl);
170160
}
171161
});
@@ -195,6 +185,16 @@ const CoCreateRender = {
195185
cloneEl: function (template) {
196186
let cloneEl = template.cloneNode(true);
197187

188+
if (template.CoCreate)
189+
cloneEl.CoCreate = template.CoCreate
190+
else
191+
cloneEl.CoCreate = {}
192+
193+
if (cloneEl.CoCreate.render)
194+
cloneEl.CoCreate.render.template = template
195+
else
196+
cloneEl.CoCreate.render = { template }
197+
198198
let templateId = cloneEl.getAttribute('template_id');
199199
if (!templateId)
200200
templateId = cloneEl.getAttribute('template');

0 commit comments

Comments
 (0)