Skip to content

Chunks (v7)

Alex edited this page Jul 19, 2022 · 1 revision

Loading Chunks

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

Chunk Directives

@render=<key>

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-->

@loop(<key>){<content>}

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.

@partial

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-->
Clone this wiki locally