-
Notifications
You must be signed in to change notification settings - Fork 0
Chunks (v7)
You can load data into chunks from one of 2 places. You can preload data in the useLoader
arguments, in the following arguments:
partialInput: {},
templateInput: {},
And you can load chunks themselves as named in your target directories
loader.template(template_name, {...inline_data});
This returns the DOMString for the template with the variables rendered
Template expression to render a value as phrasing content. It will take the value of the "key" key from your template input, and insert it into the signature's spot on the DOM.
{
foo: 'bar'
}
The following templateInput
will replace the following segment with bar
:
<!--@render=foo-->
Keys can be nested as well, for example with the following templateInput:
{
foo: {
bar: 'foobar'
}
}
You could insert this into a template like so:
<!--@render=foo.bar-->
Template expression to render an array. To access object keys within the scope of the loop, wrap the property name with {}. For 1D arrays of values, such as stylesheet urls, you can key them like so:
the following templateInput
{
styles: [
'https://styleurl1.com',
'https://styleurl2.com'
]
}
could be rendered into:
<head>
<!--other content-->
<!--@loop(styles){
<link rel="stylesheet" href="{_}">
}-->
<!--other content-->
</head>
The {_}
token signifies to render the value of the array index for each item.
Template expression to render a partial into a template. If you enable the discoverPaths
configuration option, you can nest partials in child directories of the partial root, then call them by using the directoryname/filename
syntax. For example, imagine you have the following directory structure inside of your pathRoot:
/partials/head.html
/partials/foo/bar.html
In your templates you could reference a partials in the foo
directory with:
<!--@partial=head-->
<!--@partial=foo/bar-->