This is Simple list renderer.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


This is Simple list renderer.

There are a lot of other great libraries... but this is for my study.

Please give me any advice, and All contributions are welcome!

How to use

  1. Load jQuery and My library(CDN Link:
  2. Write JavaScript code like this.
var renderer = new Maro.listRenderer("#divExample", $("#divExample").html(), [
	{ name: "name1", value: "value1" },
	{ name: "name2", value: "value2" },
	{ name: "name3", value: "value3" }
  1. Write HTML code like this.
<div id="divExample">
	<li>${name}, ${value}

Update log

Feb 28, 2018

First version of list renderer.

You can set the template and print the list.

May 23, 2018

You can access the DOM object you set.

You can use a JavaScript expression in the template.

Next step(todo)

This library will no longer use jQuery.

Set render data

renderer.setRenderData([{name: "1", value: "1"}, {name: "2", value: "2"}]); // Array

Get render data

renderer.getRenderData(index); //object


renderer.getRenderData(); //array

Get render target

renderer.getRenderTarget(); //dom

Get render template

renderer.getRenderTemplate(); //string

Set render template

renderer.setRenderTemplate($(".dom").html()); //string

Add render data

renderer.addRenderData({ // Some JSON Object
	name: "name",
	value: "value"

Remove render data

renderer.removeRenderData(index, count);


renderer.sort(compareFn); // Same as JavaScript Array.sort