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

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

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

Example

HTML Template

	<div template_id="abc1" array="render_test">
	    <div class="template card {{render2.array}} card margin:10px firstname" 
	        value="{{render2.data._id}}" 
	        template_id="abc1" 
	        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 }}" value="{{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">
	                
	                <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 class="template card " 
	                render="render2.data.string_array" render-as="string_">
	                
	                <h3 key="test" 
	                    data-attribute="{{string_.--}}" 
	                    class="{{string_.--}}" 
	                    value="{{string_.--}}"></h3>
	            </div>
	        </div>
	    </div>
	</div>
					

CoCreate-render usage

Description.

	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'},
					 ],
					 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]
				 },
			]}
	})
					

• render optionalrequired

  To render the array data, this attribute should define by the object selector path

• render-as optionalDefault: render's value

  If render defined, this attribute can define

  Default value is value of render

Funcations

• setValue(elements, data, [stateTo])

  This is main function.

  elements Type:NoteListrequired

  Dom elements for render

  data Type:objectrequired

  Data to render

  stateToType:stringoptional

• render(selector, data)

  selector Type:Stringrequired

  The selector of element to render

  data Type:objectrequired

  Data to render

• setArray(element, data)

  element Type:Noderequired

  Element to render the array. Geneeral it will be template.

  data Type:objectrequired

  Data to render

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

Effects and Styles

Events