JQUERY TEMPLATE

A lightweight plugin for seamless rendering

jquery-template is a small jQuery plugin that I wrote with the purpose of abstracting a function that I often use to render elements dynamically on the client side.

This plugin uses an HTML template element with placeholders to render multiple elements based on an array of objects.

Installation

npm i @thecarlosmolero/jquery-template

And then, require it like this:

window.jQuery = require("jquery");
require("@thecarlosmolero/jquery-template");

Args

The plugin exposes a chained render function that can be used after making a selection using the dollar sign ($) syntax.

This function accepts a templateId argument and an object with the following properties:

Property	Type	Description
delimiters	{start: string; end: string}	The symbols that delimit the placeholders inside the template element.	optional
data	Array.<Object>	An array of objects where the keys should match the placeholders within the template element's content.	required

Example usage

<div id="container"></div>

<template id="template">
  <div>
    <span>{{name}}</span>
    <span>{{gender}}</span>
    <span>{{age}}</span>
  </div>
</template>

const data = [
  {
    name: "Bran",
    gender: "male",
    age: 25,
  },
  {
    name: "Jess",
    gender: "female",
    age: 32,
  },
];

/** @type{import("@thecarlosmolero/jquery-template").JQueryTemplateElement} */
const container = $("#container");
container.clear().render("#template", {
  data,
});