<inject/>
| Details | |
|---|---|
| name | inject |
| type | tag |
| attributes | id, html |
| related attributes | inject-id |
| description | A tag that is used as placeholder to inject HTML markup. |
Attributes
- id
- type: attribute : An id to identify which markup to be injected.
- html
- type: attribute, executed : CustomAttribute that takes variable or property which the values resolves to valid text or HTML content.
Related Attributes
- inject-id
- type: attribute : CustomAttribute that can be added to any tag inside the include tag and must match the id attribute of any inject tag inside the partial template. Multiple tags can have it with the same value.
Inner Content
Anything placed inside the tag will be used as default if no content or content resolves to empty string from the html attribute or the include tag content.
Note: The inject tag works differently depending on where it is placed. When inside a partial template, it depends on the include tag inner content. When the html attribute is specified, the inject simply relies on the value provided.
Usage Examples
Below example will place all the links where inject with id of "style" is, same goes for the "script" id one. Everything else will be placed where the inject with no id is.
<!-- _layout.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{title}</title>
<inject id="style"></inject>
</head>
<body>
<main>
<inject></inject>
</main>
<inject id="script"></inject>
</body>
</html>
<!-- index.html -->
<include partial="layout" data="{title: 'My Projects'}">
<link rel="stylesheet" href="./normalizer.css" inject-id="style">
<link rel="stylesheet" href="./project.sass" inject-id="style">
<include partial="banner"></include>
<include partial="main-content"></include>
<include partial="footer"></include>
<script src="app.ts" inject-id="script"></script>
</include>Inject markup from a variable or property. This works like the ignore tag with the only difference being that the markup is actually compiled.
<inject html="$data.blogPost.content"></inject>