GitHub
Twitter<tag bindings...>
Create a component using HTML and can-stache-bindings.
<TAG BINDINGS...>[TEMPLATES][LIGHT_DOM]</TAG>
Create an instance of a component on a particular tag in a can-stache view. Use the bindings syntaxes to set up bindings.
The following creates a my-autocomplete element and passes the my-autocomplete’s
ViewModel the Search model as its source property and
a <can-template> that is used to render the search results:
<my-autocomplete source:from="this.Search">
<can-template name="search-results">
<li>{{name}}</li>
</can-template>
</my-autocomplete>
Parameters
- TAG
{String}:An HTML tag name that matches the tag property of the component. Tag names should include a hyphen (
-) or a colon (:) like:acme-tabsoracme:tabs. - BINDINGS
{can-stache-bindings}:Use the following binding syntaxes to connect the component’s ViewModel to the view’s scope:
- key:from=expression — one-way data binding to child
- key:to=expression — one-way data binding to parent
- key:bind=expression — two-way data binding child to parent
- on:event=expression — event binding on the view model
- TEMPLATES
{sectionRenderer(context, helpers)}:Between the starting and ending tag can exist one or many <can-template> elements. Use <can-template> elements to pass custom templates to child components. Each
<can-template>is given anameattribute and can be rendered by a corresponding <can-slot> in the component’s view.For example, the following passes how each search result should look and an error message if the source is unable to request data:
<my-autocomplete source:from="Search"> <can-template name="search-results"> <li>{{name}}</li> </can-template> <can-template name="search-error"> <div class="error">{{message}}</div> </can-template> </my-autocomplete>
Use
To create a component instance, add its tag to your html page or a
stache view. For example, the following has a <my-counter>
element in the page:
<my-counter count:from="2"></my-counter>
<script type="module">
import {Component} from "can";
Component.extend( {
tag: "my-counter",
view: `
Count: {{this.count}}.
<button on:click="this.increment()">+1</button>
`,
ViewModel: {
count: {default: 0},
increment(){
this.count++;
}
}
} );
</script>
When Component.extend defines the my-counter element,
a component instance will be created. Creating a component instance involves creating
a new ViewModel and rendering the view.
Differences between components in stache and HTML
Currently, components embedded in your pages HTML have limited abilities compared to those embedded in stache templates. Components embedded in HTML:
- Must have a closing tag like
<my-counter></my-counter>. Tags like<my-counter/>are allowed in stache. - Are currently unable to use <can-template> or pass light DOM to be used by <content>.
- Do not have a scope, so they are unable to pass anything other
than primitives. For example,
<my-counter count:from="myNumber"></my-counter>will not be able to look up amyNumber.
Components embedded in your pages should usually be the root component and be used to create
other components. For example, the following <my-app> component creates
the <hello-world/> and <goodbye-moon/> elements:
<my-app></my-app>
<script type="module">
import {Component} from "can";
Component.extend({
tag: "hello-world",
view: `Hello World!`
});
Component.extend({
tag: "goodbye-moon",
view: `Goodbye Moon.`
})
Component.extend( {
tag: "my-app",
view: `
<p><hello-world/></p>
<p><goodbye-moon/></p>
`
} );
</script>