CoCreate-render

CoCreate-render javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable.

Install

npm i @cocreate/render

Or you can use cdn link:

<script>https://cdn.cocreate.app/render/latest/CoCreate-render.min.js</script>

for styling please refer to #id-style

Usage

CoCreate-render would use that set attributes and renders the elements based on html and json data.

Example

HTML Template


	<div template_id="abc1" fetch-collection="render_test">
	    <div class="template card {{render2.collection}} card margin:10px firstname" 
	        value="{{render2.data._id}}" 
	        template_id="abc1" 
	        render-array="render2.data">
	        <div class="card-body padding:15px" collection="{{render2.collection}}">
	            <h3 class="{{render2.data.firstname}} blue" value="{{render2.data.lastname}} - {{render2.data.firstname}}">--</h3>
	            <h3 value="{{ render2.data.lastname }}" value="{{lastname}}"></h3>
	            <input value="{{ render2.collection }}"/>
	            <h3 class="email" value="{{render2.data.email}}">--</h3>
	            <textarea value="{{render2.data.lastname}}"></textarea>
	            <h3 data-attribute="{{render2.data.personal_info.email}}" name="email" value="{{render2.data.personal_info.email}}"></h3>
	            
	            <div class="template card " 
	                render-array="render2.data.testing_array">
	                
	                <h3 data-attribute="{{render2.data.testing_array.email}}" name="email" class="{{render2.data.testing_array.email}}" value="{{render2.data.testing_array.email}}"></h3>
	                <h3 value="{{render2.collection}}"></h3>
	                
	                <h3 value="{{render2.data.personal_info.email}}"></h3>
	            </div>
	            <div class="template card " 
	                render-array="render2.data.string_array" render-key="string_">
	                
	                <h3 name="test" 
	                    data-attribute="{{string_.--}}" 
	                    class="{{string_.--}}" 
	                    value="{{string_.--}}"></h3>
	            </div>
	        </div>
	    </div>
	</div>
					

CoCreate-render usage

Description.


	CoCreate.render.data({
		selector: '[template_id=abc1]',
		data: {
			 render2: {
				collection : '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'},
					 ],
					 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:'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]
				 },
			]}
	})
					

Attributes

Funcations

How Does It Works

CoCreate-render works based on attributes and template, The attributes to render should be wrapper "{{ }}", and attributes can include the combine "{{}}" wrapper.

To render the array data, Render need to define class="template". render-array

Effects and Styles

Events

Demo