ln.templates/ln.templates/README.md

125 lines
2.8 KiB
Markdown

# ln.templates
Templating engine primarly used for html.
### Features:
##### Iterations
Render the children 5 times, with the variable xy set to the 5 values 0, 3, 6, 4, 1 :
<tag v-for:xy="[0,3,6,4,1]">...</tag>
##### Conditionals
Render tag only if attribute v-if evaluates to a non false value.
<tag v-if="true">...</tag>
##### Inclusions
Replace this tag with the rendered content of othertemplate.html:
<tag v-include="othertemplate.html"></tag>
##### Slots
Use named slots to send content to included template:
<tag v-include="othertemplate.html">
<div v-slot="title"></slot>
<div v-slot=""></slot>
</tag>
Define Slots to be replaced with content from "caller":
<slot name="title">
<div>Some stuff...</div>
<slot name="slotname">
I am the default content, that will be rendered,
if there is no slot named "slotname"
</slot>
<slot>I am the default slot</slot>
<slot name="">I am also the default slot</slot>
By not providing any v-slot elements v-include will use the element itself to be the default slot.
<tag v-include="frame.html">
This tag will be surrounded by the frame!
Because there is no slot defined within it.
</tag>
##### Javascript
Define / run JavaScript logic within the script:
<template-script>
let v = 1 + 2;
</template-script>
Add style classes conditionally via expression:
<div :class="{ "text-center": true, "text-primary": false }">
Set attributes values from expressions:
<div :myattribute="getMyAttributeValue()">
Include content by expressions within text elements:
<div>This is my favourite color: {{ myFavouriteColor }}.
### Filesystem overlay
Overlaying is possible by using RecursiveResolver class as ITemplateResolver.
Example directory layout:
/layout/frame.html
/layout/htmlhead.html
/tmpl_a.html
The files use the following references:
tmpl_a.html -> /layout/frame.html -> /layout/htmlhead.html
htmlhead.html may contain something like
<head>
<title>...</title>
<link rel=.... >
...
</head>
We can now add a file to new folder:
/layout/frame.html
/layout/htmlhead.html
/tmpl_a.html
/layouts/b/layout/htmlhead.html
By a call to RecursiveResolver.FindResolver("/layouts/b") we get a ITemplateResolver
that looks up Folders and Templates in that directory first, then in the
parent folders back to the root folder of this structure.
So if we call GetTemplateByPath("tmpl_a.html") we get the same Template
but this instance will use the reference chain
tmpl_a.html -> /layout/frame.html -> /layouts/b/htmlhead.html
which effectivly overlays *htmlhead.html* with an alternative version and still uses the
*/layout/frame.html* template.