/grenade

An easy-to-use out-of-the-box rendering tool for Web

Primary LanguageJavaScriptMIT LicenseMIT

grenade

codebeat badge License

An easy-to-use out-of-the-box rendering tool for Web

Minified Release

v0.3

Usage

  • For a list data
<script src="./grenade.js"></script>
<div id="test">
    <p class="g-node"></p>
    <input type="text" class="g-node">
</div>
G.target('#test').throw([1,2])
  • For an object data
<script src="./grenade.js"></script>
<div id="test">
    <span class="g-node" g-key="name"></span>
    <img class="g-node" g-key="avatar">
</div>
G.target('#test').throw({"name":"JerryLiao26", "avatar":"your.com/avatar.png"})
  • For a list of object
<script src="./grenade.js"></script>
<div class="test">
    <span class="g-node" g-key="$index"></span>
    <p class="g-node" g-key="name"></p>
    <a class="g-node" g-key="link"></span>
    <button class="g-node" g-key="$data:id" onclick="func()">Jump to User</button>
</div>
let data = [
    {"name": "JerryLiao26", "id": "26", "link": "github.com/JerryLiao26"},
    {"name": "John Doe", "id": "66", "link": "your.site/john_doe"}
]
G.target('.test').throw(data, true)

Rendering Rules

  • Grenade select elements through querySelectorAll(), so if your selector selects multiple HTML elements with same class/id, all the elements would be rendered.
  • If you're rendering a list with grenade, but you've got four g-nodes for only three elements in the list, the last g-node will be rendered by the first element.
  • For different html tags, grenade use expection list to render. For example, <a> tag rendering targets href attribute, <input>, <option> tag are value attribute, and src for <img>, <video>, <iframe> tags. Other tags will fill innerHTML.
  • Except for loop rendering, grenade don't change existing HTML nodes, that means re-render is quite easy.
  • To re-render list of objects, grenade would remove all nodes previously generated by itself.
  • For a data-* attribute render, use $data: as g-key prefix, with the attribute name in data as suffix, so the final result will be an attribute called data-your-attr-name