@cocreate/render
Version:
A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
120 lines (112 loc) • 5.53 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Render | CoCreateJS</title>
<!-- CoCreate Favicon -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<div template="abc1">
<div
class="template card {{render2.array}} card margin:10px firstname"
value="{{render2.data._id}}"
template
render="render2.data">
<div class="card-body padding:15px" array="{{render2.array}}">
<h3
class="{{render2.data.firstname}} blue"
value="{{render2.data.lastname}} - {{render2.data.firstname}}">
--
</h3>
<h3
value="{{ render2.data.lastname }}"
test="{{lastname}}"></h3>
<input value="{{ render2.array }}" />
<h3 class="email" value="{{render2.data.email}}">--</h3>
<textarea value="{{render2.data.lastname}}"></textarea>
<h3
data-attribute="{{render2.data.personal_info.email}}"
key="email"
value="{{render2.data.personal_info.email}}"></h3>
<div
class="template card"
render="render2.data.testing_array">
testing-array template
<h3
data-attribute="{{render2.data.testing_array.email}}"
key="email"
class="{{render2.data.testing_array.email}}"
value="{{render2.data.testing_array.email}}"></h3>
<h3 value="{{render2.array}}"></h3>
<h3 value="{{render2.data.personal_info.email}}"></h3>
<div>*******************************************</div>
</div>
<div
class="template card"
render="render2.data.string_array"
render-as="string">
string - template
<h3
key="test"
data-attribute="{{string}}"
class="{{string}}"
value="{{string}}"></h3>
</div>
</div>
</div>
</div>
<pre>
<h1>Paste in your browser console</h1>
/** Example of array object from db -- render2 is an example of render_id**/
CoCreate.render.data({
selector: '[template=abc1]',
data: {
render2: {
array : 'dededede',
data: [{
_id : '123kijfhgfkel45',
firstname : 'Jin',
lastname : 'codingmachinine',
personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
email: 'tesing@gamil.com',
testing_array : [
{email:'jeanmendozar@gmail.com','phone':'0','home':'home1'},
{email:'frank@gmail.com','phone':'1','home':'home2'},
{email:'jose@gmail.com','phone':'2','home':'home3'},
{email:'juan@gmail.com','phone':'3','home':'home4'},
{email:'kooo@gmail.com','phone':'4','home':'home5'},
],
string_array: ['string1', 'string2', 1, 3]
},{
_id : '5678efe32qd2ol',
firstname : 'jean',
lastname : 'Mendoza',
personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
email: 'tesing2@gamil.com',
testing_array : [
{email:'1jeanmendozar@gmail.com','phone':'10','home':'home11'},
{email:'1frank@gmail.com','phone':'11','home':'home12'},
{email:'1jose@gmail.com','phone':'12','home':'home13'},
{email:'1juan@gmail.com','phone':'13','home':'home14'},
{email:'1kooo@gmail.com','phone':'14','home':'home15'},
{email:'1allask@gmail.com','phone':'15','home':'home16'},
{email:'1ana@gmail.com','phone':'16','home':'home17'},
{email:'1rosa@gmail.com','phone':'17','home':'home18'},
{email:'1nuevo@gmail.com','phone':'18','home':'home19'}
],
string_array: ['string1', 'string2', 1, 3]
},
]
}
}
})
</pre>
<!--<script src="../dist/CoCreate-render.js"></script>-->
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>