<include/>
| Details | |
|---|---|
| name | include |
| type | tag |
| attributes | partial, partial-path, data |
| description | A tag that replaces itself with the content of the partial file you provided and can pass scoped data to the partial as well. |
Attributes
- partial
- type: attribute : The name of the partial file name without extension with or without the initial underscore.
- partial-path
- type: attribute : A relative path from the page file to the partial file. The partial file may or not have the leading underscore.
- data
- type: attribute, optional : A Javascript object representation of the context data to be passed to the partial template.
Inner Content
Anything placed inside the include tag is treated as the content to be inject inside the partial. In the partial does not content a inject tag placeholder, the inner content will be thrown away.
Usage Examples
Include the head tag and inject the style link tag to it.
<!-- _head.html -->
<head>
<meta charset="UTF-8">
<title>{title}</title>
<inject></inject>
</head>
<!-- project.html -->
<include partial="head" data="{title: 'My Projects'}">
<link rel="stylesheet" href="./project.sass">
</include>You can also nest includes to inject the inner include into the wrapping partial.
<include partial="layout">
<include partial="banner"></include>
<include partial="main-content"></include>
<include partial="footer"></include>
</include>The partial name as the data can also come from a variable or property. The partial and the partial-path attribute are bind attribute so you need the curly braces but the data attribute is a execute attribute.
<include partial="{$data.page.partial}" data="$data.page.data"></include>