js_htparser

outdated! - documentation on v3 follows

HTML Template parser v2

a simple template markup parse to use within your html to build dynamic html content

this parser searches the body container of the html document for a "templates" template element and extracts the inner templates.

<templates id="templates">
	<!-- Hi im a test template -->
	<template template-id="test-template">
		<p>Test Content</p>
	</template>
</template>

marker are now rules which describe a certain request to the parser.
a rule looks like the following

{{ request operator: value }}

the rule can be written in different ways wheres every writing in other inpretation results.

[ request ]

request have different meaning depending on the value

# marker

marker are request without any functionalities they are just being replaced by the value defined in the given markup
marker requests look like the following

{{ marker }}

# single commands

single commands are a oneline command and are being replaced by the parsed content from the command function
single commands look like the following

{{ command: value }}

# area commands

area commands are commands which affect more than its initial rule. They look like the following

{{ command start: value }}
/* html content */
{{ command end }}

when defining such rule its start, end point and content are being replaced by the created content from the command

[ operator ]

the operator describes what the command has to do. An operator has an effect on the outcome of content the command creates. More under "operator" functions.

[ value ]

the value is important for commands to know which index to use in the markup. When no value is given no content will be created.

---

Commands

[ foreach ]

foreach is like the foreach you know. It loops through the defined markup value and parses every single item.

<!-- template -->
<template template-id="fruit-template">
	{{ foreach start: fruits }}
		<p>{{ fruit }}</p>
	{{ foreach end: fruits }}
</template>

// the parser
var parser = require( "js_htparser" ).parser;

// markup
var markup = fruits: [
		{ "fruit": "apple" },
		{ "fruit": "orange" },
		{ "fruit": "banana" }
	]
}

// parse content into "content"
var content = parser.parse( "fruit-template", markup );

<!-- result -->
<p>apple</p>
<p>orange</p>
<p>banana</p>

[ template ]

serves as either a placeholder for later defined templates or a template itself. By defining the template command as a single line command will result in being interpreted as a template placeholder:

<!-- main template -->
<template template-id="cuptypes">
	<ul>
	{{ foreach start: cups }}
		<p>{{ cup }}</p>
	{{ foreach end: cups }}
	</ul>
</temlate>

<!-- subtemplate -->
<template template-id="template-placeholder">
	{{ template: cuptypes }}
</template>

// parser
var parser = require( "js_htparser" ).parser;

// markup
var markup = {
	"cuptypes": {
		"cups": [
		    { "cup": "glass" },
		    { "cup": "goblet" },
		    { "cup": "mug" }
		]
	}
}

// parse content direct into a container
document.getElementById("app").innerHTML = parser.parse( "template-placeholder", markup );

By defining the request as a area command result in being interpreted as a template itself:

<template template-id="vegetables">
	{{ template start: feelings_on_vegetables }}
		<p>Olaf appreciates: {{ olaf_veg }}</p>
		<p>Peter disgraces: {{ peter_veg }}</p>
		<p>George exterminates: {{ george_veg }}</p>
	{{ template end: feelings_on_vegetables }}
</template>

// parser
var parser = require( "js_htparser" );

// george specific function
var george_veg = () => { return "ogonori"; }

// markup
var markup = {
	"feelings_on_vegetables": {
		"olaf_veg": "kurrat",
		"peter_veg": "canna",
		"george_veg": george_veg()
	}
}

// store parsed content
var content = parser.parse( "feelings_on_vegetables", markup );