GitHub
Twitterportal
{{#portal(EXPRESSION)}}FN{{/portal}}
portal is used to insert a section of a template into another element, and not at the place where the helper is used.
import {stache} from "can";
let view = stache(`
{{#portal(head)}}
<title>My website!</title>
<meta og:title="My website">
{{/portal}}
`);
let data = {
head: document.head
};
view(data);
console.log(document.head.innerHTML)
// -> <title>My website!</title>\n<meta og:title="My website">
Parameters
- EXPRESSION
{KeyLookup Expression|Call Expression}:An expression that returns an element. If the value of the
EXPRESSIONis observable, the resulting HTML will be moved when the value of the observable changes to a different element. - FN
{sectionRenderer(context, helpers)}:A subsection that is rendered to the value in
EXPRESSION.
Use
portal is used to render HTML some place other than the template in which the helper is used.
A common use case for portal is to render content with the document's head element.
For components, this makes it easier to have separate <title> and <meta> tags defined in each template.
For example this component:
import {StacheElement} from "can";
class CartPage extends StacheElement {
static view = `
{{#portal(head)}}
<title>Cart | Dog Stuff</title>
{{/portal}}
`;
static props = {
head: {
get default() {
return document.head;
}
}
};
}
customElements.define("cart-page", CartPage);
Will insert <title>Cart | Dog Stuff</title> into the document head.