2.8 KiB

Raw Permalink Blame History

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.

2.8 KiB Raw Permalink Blame History