Another JavaScript Templating Engine

Tea-Plates.js

Tea-Plates accepts JSON and a creates a templating string from the provided JSON Object.

Demo

How to Install

• Download the tea-plates.js file from the dist/ folder and import it to your project.

OR

• CDN
  • Latest Release
    • <script src="https://cdn.jsdelivr.net/gh/an23lm/tea-plates.js/dist/tea-plates.js"></script>
  • Latest from a major version
    • https://cdn.jsdelivr.net/gh/an23lm/tea-plates.js@{major-version-number}/dist/tea-plates.js
  • Latest from a minor version
    • https://cdn.jsdelivr.net/gh/an23lm/tea-plates.js@{major-version-number}.{minor-version-number}/dist/tea-plates.js
  • Specific release
    • https://cdn.jsdelivr.net/gh/an23lm/tea-plates.js@{major-version-number}.{minor-version-number}.{patch-number}/dist/tea-plates.js

Example

<div id='cars-list-wrapper'>
	<!-- Tea Plates will insert generated elements here -->
</div>

let carTemplate = data => {
	return `<div class="car">${data.name}</div>`
}

let carsLoadingTemplate = `<div class="cars-loading">Loading</div>`

let noCarsAvailableTemplate = `<div class="no-cars-available">No cars to see here</div>`

let carTemplateEngine = new TeaPlates('cars-list-wrapper', carTemplate, carsLoadingTemplate, noCarsAvailableTemplate)

TeaPlates Documentation

Kind: global class
Summary: class constructor.
Access: public

• TeaPlates
  • new TeaPlates(wrapperId, template, loadingTemplate, noDataTemplate)
  • .setData(jdata)
  • .removeData()
  • .insertObjects(completion)
  • .registerEventListeners(eventType, eventHandler, options) ⇒
  • .unregisterEventListeners(eventListenerId) ⇒
  • .updateDataForUid(uid, callback)
  • .reloadObjectAtUid(uid)
  • .removeObjectAtIndex(index, completion)
  • .removeObjectWithUID(uid, completion)
  • .removeAllObjects(completion)
  • .showNoDataElement(completion)
  • .removeNoDataElement(completion)
  • .showLoading(count, completion)
  • .hideLoading(completion)

new TeaPlates(wrapperId, template, loadingTemplate, noDataTemplate)

Param	Type	Description
wrapperId	String	wrapper ID to insert template objects in.
template	function	template function which will be called with data and should return template string.
loadingTemplate	String	template function which will be called to get a loading template string.
noDataTemplate	String	template function which will be called to get "no data" template string.

teaPlates.setData(jdata)

Kind: instance method of TeaPlates
Summary: jdata is parased and templates objects are created.
Access: public

Param	Type	Description
jdata	Array	data used to create template/s

teaPlates.removeData()

Kind: instance method of TeaPlates
Summary: remove all the data.
Access: public

teaPlates.insertObjects(completion)

Kind: instance method of TeaPlates
Summary: hide loading elements and queue insert objects into the wrapper div.
Access: public

Param	Type	Description
completion	function	function is called when all objects are inserted and done animating.

teaPlates.registerEventListeners(eventType, eventHandler, options) ⇒

Kind: instance method of TeaPlates
Summary: register an event listner on the top level div on the template.
Returns: ID for of the registered event listener, use this to unregister the listener.
Access: public
Link: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Param	Type	Default	Description
eventType	String		type of event listener.
eventHandler	function		event handler function.
options	Object	false	specifies characteristics about the event listener.

teaPlates.unregisterEventListeners(eventListenerId) ⇒

Kind: instance method of TeaPlates
Summary: unregister an event listener
Returns: the removed event listener object
Access: public

Param	Type	Description
eventListenerId	*	the event listener ID received while registering the event listener

teaPlates.updateDataForUid(uid, callback)

Kind: instance method of TeaPlates
Summary: update the data for template object with UID
Access: public

Param	Type	Description
uid	Number	Unique ID of the template object
callback	function	calls callback function with json data at the UID. Callback function should return the modified json data.

teaPlates.reloadObjectAtUid(uid)

Kind: instance method of TeaPlates
Summary: after updateDataForUid use this function to reload the dom object
Access: public

Param	Type	Description
uid	Number	Unique ID of the template object

teaPlates.removeObjectAtIndex(index, completion)

Kind: instance method of TeaPlates
Summary: queues remove a template object from DOM at index
Access: public

Param	Type	Description
index	Number	of object in DOM
completion	function

teaPlates.removeObjectWithUID(uid, completion)

Kind: instance method of TeaPlates
Summary: queues remove a template object from DOM with UID
Access: public

Param	Type	Description
uid	Number	of the DOM elements
completion	function

teaPlates.removeAllObjects(completion)

Kind: instance method of TeaPlates
Summary: remove all template objects.
Access: public

Param	Type	Description
completion	function	callback

teaPlates.showNoDataElement(completion)

Kind: instance method of TeaPlates
Summary: show no data element.
Access: public

Param	Type	Description
completion	function	callback.

teaPlates.removeNoDataElement(completion)

Kind: instance method of TeaPlates
Summary: remove no data element.
Access: public

Param	Type	Description
completion	function	callback.

teaPlates.showLoading(count, completion)

Kind: instance method of TeaPlates
Summary: show loading elements.
Access: public

Param	Type	Default	Description
count	Number	1	number of loading elements.
completion	function		callback.

teaPlates.hideLoading(completion)

Kind: instance method of TeaPlates
Summary: hide loading elements.
Access: public

Param	Type	Description
completion	function	callback.