GitHub
Twitter{{{expression}}}
Insert the unescaped value of the expression into the output of the template.
{{{EXPRESSION}}}
Behaves just like {{expression}} but does not escape the result. The following makes a markdown editor:
<markdown-edit></markdown-edit>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/1.8.7/showdown.min.js"></script>
<script type="module">
import {StacheElement} from "can";
class MarkdownEdit extends StacheElement {
static view = `
<textarea on:input:value:bind="this.value"
rows="4" style="width: 90%"></textarea>
<div>{{{this.html}}}</div>
`;
static props = {
value: "# Hello World\nHow are __you__?",
converter: {
get default() {
return new showdown.Converter();
}
},
get html(){
return this.converter.makeHtml(this.value);
}
};
};
customElements.define("markdown-edit", MarkdownEdit);
</script>
Parameters
- EXPRESSION
{Literal Expression|KeyLookup Expression|Call Expression|Helper Expression}:An expression whose unescaped result is inserted into the page.
Returns
{Primitive|Node|Object|function}:
Depending on what the expression evaluates to, the following happens:
null,undefined- inserts the empty string.Number,Boolean- inserts the string representation of the value.String- inserts the HTML of the string.Function- Calls the function back with a textNode placeholder element.Node,Element- Inserts the HTML into the page.- An object with the
can.toDOMsymbol - Inserts the result of calling thecan.toDOMsymbol. This is how safeString works. - An object with the
can.viewInsert- Calls thecan.viewInsertfunction with tagData and inserts the result.
Read {{expression}}'s documentation to understand how these return types are handled.
Render Component Instances
{{{expression}}} can be used to render can-component instances:
import {StacheElement, stache} from "can";
class MyGreeting extends StacheElement {
static view = `
<p>Hello {{subject}}</p>
`;
static props = {
subject: type.maybeConvert(String)
};
}
customElements.define("my-greeting", MyGreeting);
const myGreetingInstance = new MyGreeting({
subject: "friend"
});
const template = stache("<div>{{{componentInstance}}}</div>");
const fragment = template({
componentInstance: myGreetingInstance
});
fragment; //-> <div><my-greeting><p>Hello friend</p></my-greeting></div>