dom-repeater

Render lists in DOM easily.

:cloud: Installation

Check out the dist directory to download the needed files and include them on your page.

If you're using this module in a CommonJS environment, you can install it using npm or yarn and require it:

# Using npm
npm install --save dom-repeater

# Using yarn
yarn add dom-repeater

:clipboard: Example

domRepeater([
    { value: 0, text: "apple" }
  , { value: 1, text: "pear" }
  , { value: 2, text: "orange" }
  , { value: 3, text: "lemon" }
]);

:question: Get Help

There are few ways to get help:

1. Please post questions on Stack Overflow. You can open issues with questions, as long you add a link to your Stack Overflow question.
2. For bug reports and feature requests, open issues. :bug:
3. For direct and quick help, you can use Codementor. :rocket:

:memo: Documentation

DOMRepeater(container, item)

Creates a new DOMRepeater.

The DOMRepeater.renderer is an object containing the render function. You can override the renderer object with a different renderer. By default, mustache is used.

Params

• HTMLElement|String container: The HTML Element or the selector as a string.
• HTMLElement|String item: The HTML Element to use as template or the selector (default: the element with data-repeater='item' attribute in the container).

Return

• DOMRepeater The DOMRepeater instance.

renderItem(cData, index)

Renders one item.

Params

• Object cData: The data to render.
• Number index: The current index.

Return

• String The rendered HTML as string.

render(data)

Renders the data array.

Params

• Array data: The data to render (an array of objects).

domRepeater(sel, data)

Render the lists in the selected containers.

Note: domRepeater.DOMRepeater contains the DOMRepeater class.

Usage:

// Render these three items in all the [data-repeater='container'] from the page.
domRepeater([
 { text: "item 1" },
 { text: "item 2" },
 { text: "item 3" }
]);

// Render these three items in all the .my-selector elements from the page.
domRepeater(".my-selector", [
 { text: "item 1" },
 { text: "item 2" },
 { text: "item 3" }
]);

Params

• HTMLElement|String sel: The selector or HTML element.
• Array data: The data array.

:yum: How to contribute

Have an idea? Found a bug? See how to contribute.

:sparkling_heart: Support my projects

I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).

However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:

• Starring and sharing the projects you like :rocket:

• —I love books! I will remember you after years if you buy me one. :grin: :book:

• —You can make one-time donations via PayPal. I'll probably buy a ~~coffee~~ tea. :tea:

• —Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone).

• Bitcoin—You can send me bitcoins at this address (or scanning the code below): 1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6

  

Thanks! :heart:

:scroll: License

MIT © Ionică Bizău