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 {Component} from "can";
Component.extend({
tag: "markdown-edit",
view: `
<textarea on:input:value:bind="this.value"
rows="4" style="width: 90%"></textarea>
<div>{{{this.html}}}</div>
`,
ViewModel: {
value: {
default: "# Hello World\nHow are __you__?"
},
converter: {
Default: showdown.Converter
},
get html(){
return this.converter.makeHtml(this.value);
}
}
});
</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 Component from "can-component";
import stache from "can-stache";
const MyGreeting = Component.extend({
tag: "my-greeting",
view: "<p>Hello {{subject}}</p>",
ViewModel: {
subject: "string"
}
});
const myGreetingInstance = new MyGreeting({
viewModel: {
subject: "friend"
}
});
const template = stache("<div>{{{componentInstance}}}</div>");
const fragment = template({
componentInstance: myGreetingInstance
});
fragment; //-> <div><my-greeting><p>Hello friend</p></my-greeting></div>