125 lines
2.8 KiB
Markdown
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|