3.0.3 • Published 6 years ago
dom-node-template v3.0.3
DOM-Node-Template
A middle way to create and work with HTML or SVG (or mixed)
Installation:
npm install dom-node-template
Usage
- module import
import NodeTemplate from "dom-node-template"
- html import
<script src="https://cdn.jsdelivr.net/npm/dom-node-template/dist/bundle.js"></script>
- create template:
const html = new NodeTemplate(`<h1>Title</h1>`)
- append the template:
element.appendChild(html.fragment)
What you get:
The constructor returns an Object containing your HTML in a document fragment. It offers you the references of the root element if there is one, an all Elements that have the id or data-ref attribute set.
{
fragment = DocumentFragment,
root = HTMLElement | Array<HTMLElement>,
ids = {}, // References: All Nodes that got the 'id' attribute set.
refs = {}, // References: All Nodes that got the 'data-ref' attribute set.
}
Working with jQuery
const html = new NodeTemplate(`
<div id="app-container">
<h1>foo</h1>
<div id="app-bar">
// ...
</div>
</div>
`)
// before
$("#app-bar").on("click", () => {})
// after
$(html.ids["app-bar"]).on("click", () => {})
Usage Example:
Definition of a ListView class
/**
* file: ListView.js
*
*/
import NodeTemplate from "dom-node-template"
export default class ListView {
constructor(data: any){
this.html = new NodeTemplate(`
<div class="list-view">
<h1>${data.header}</h1>
<ul data-ref="list">
${ data.items.map(item => `<li>${item}</li>`).join("") }
</ul>
</div>
`)
}
addItem(item: String | Array<String>){
if(typeof item === "string"){
// > you may not need a new node template for
// > an li tag, this is just an example.
// > you could also have a ListItem class instead,
// > or create the li with document methods.
const li = new NodeTemplate(`<li>${item}</li>`, { nodeOnly: true })
this.html.refs["list"].appendChild(li)
}
else if(item instanceof Array){
let li = undefined
item.forEach(i => {
li = new NodeTemplate(`<li>${i}</li>`, { nodeOnly: true })
this.html.refs["list"].appendChild(li)
})
}
}
// ... more methods ...
}
Implementation of the ListView
/**
* file: appPresenter.js
*
*/
import * as appView from "./appView.js"
import $ from "jquery"
const list = new ListView({
header: "Medication",
data: ["trust", "love", "drugs", "meditation"]
})
// > imagine appView.html is another NodeTemplate.
appView.html.appendChild(list.fragment)
// VIEW BINDING
$(appView.html.refs["something"]).on("click", () => {
list.addItem(e.target.innerText)
})
// or just
list.add("music")
Advantages/Comparison (incomplete section):
const html = new NodeTemplate(`
<div id="app-container">
<h1>foo</h1>
<div id="app-bar">
</div>
</div>
`)
3.0.3
6 years ago
3.0.2
6 years ago
3.0.1
6 years ago
3.0.1-8
6 years ago
3.0.1-7
6 years ago
3.0.1-6
6 years ago
3.0.1-5
6 years ago
3.0.1-4
6 years ago
3.0.1-3
6 years ago
3.0.1-2
6 years ago
3.0.1-1
6 years ago
3.0.1-0
6 years ago
2.2.0
6 years ago
2.1.10
6 years ago
2.1.9
6 years ago
2.1.8
6 years ago
2.1.7
6 years ago
2.1.6
6 years ago
2.1.5
6 years ago
2.1.4
6 years ago
2.1.3
6 years ago
2.0.7
6 years ago
1.0.1
7 years ago
1.0.0-R1
7 years ago
1.0.0
7 years ago