Skip to content

Commit

Permalink
Updates after review
Browse files Browse the repository at this point in the history
  • Loading branch information
@cherifGsoul
cherifGsoul committed Oct 2, 2019
1 parent e863f5d commit 466d4ff
Showing 1 changed file with 30 additions and 36 deletions.
66 changes: 30 additions & 36 deletions docs/can-stache-element.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
import { StacheElement } from "can/everything";
class Counter extends StacheElement {
static view = `
Count: <span>{{this.count}}</span>
Count: <span>{{ this.count }}</span>
<button on:click="this.increment()">+1</button>
`;
static props = {
Expand Down Expand Up @@ -98,7 +98,7 @@ To create a [can-stache] view for the element, add a [can-stache-element/static.
import { StacheElement } from "can/everything";
class Counter extends StacheElement {
static view = `
Count: <span>{{this.count}}</span>
Count: <span>{{ this.count }}</span>
<button on:click="this.increment()">+1</button>
`;
}
Expand All @@ -122,7 +122,7 @@ To add property definitions, add a [can-stache-element/static.props static props
import { StacheElement } from "can/everything";
class Counter extends StacheElement {
static view = `
Count: <span>{{this.count}}</span>
Count: <span>{{ this.count }}</span>
<button on:click="this.increment()">+1</button>
`;
static props = {
Expand All @@ -145,7 +145,7 @@ Methods (as well as getters and setters) can be added to the class body as well:
import { StacheElement } from "can/everything";
class Counter extends StacheElement {
static view = `
Count: <span>{{this.count}}</span>
Count: <span>{{ this.count }}</span>
<button on:click="this.increment()">+1</button>
`;
static props = {
Expand Down Expand Up @@ -173,7 +173,7 @@ import { StacheElement } from "can/everything";
class Timer extends StacheElement {
static view = `
<p>{{this.time}}</p>
<p>{{ this.time }}</p>
`;
static props = {
time: { type: Number, default: 0 },
Expand Down Expand Up @@ -215,11 +215,11 @@ you might want a `<hello-world>` element to write out the "Hello World" message
On a high level, this customization involves two steps:

- Passing templates with `<can-template>`
- Calling the templates with `{{this.template()}}`
- Calling the templates with `{{ this.template() }}`

#### Passing templates with `<can-template>`

When defining a `StacheElement` in a [can-stache], you can declaratively create and
When rendering a StacheElement in a [can-stache] template, you can declaratively create and
pass templates with the `<can-template>` element.

For example, one might want to customize one `<hello-world>` element to write out
Expand All @@ -228,13 +228,13 @@ For example, one might want to customize one `<hello-world>` element to write ou
```html
<hello-world>
<can-template name="messageTemplate">
<h1>{{message}}</h1>
<h1>{{ message }}</h1>
</can-template>
</hello-world>

<hello-world>
<can-template name="messageTemplate">
<p>I say "<i>{{message}}</i>"!</p>
<p>I say "<i>{{ message }}</i>"!</p>
</can-template>
</hello-world>
```
Expand All @@ -256,25 +256,25 @@ Here's what you need to know about `<can-template>`:
```html
<hello-world>
<can-template name="greetingTemplate">
<b>{{greeting}}</b>
<b>{{ greeting }}</b>
</can-template>
<can-template name="subjectTemplate">
<b>{{subject}}</b>
<b>{{ subject }}</b>
</can-template>
</hello-world>
```

- `<can-template>`s have the same scope of the custom element, __plus__
a `LetScope` that the custom element can optionally provide. This means
that a `{{this.someData}}` immediately outside the `<hello-world>` will
reference the same value as `{{this.someData}}` within a `<can-template>`:
that a `{{ this.someData }}` immediately outside the `<hello-world>` will
reference the same value as `{{ this.someData }}` within a `<can-template>`:

```html
{{this.someData}}
{{ this.someData }}
<hello-world>
<can-template name="messageTemplate">
<h1>{{message}}</h1>
<p>Also: {{this.someData}}</p>
<h1>{{ message }}</h1>
<p>Also: {{ this.someData }}</p>
</can-template>
</hello-world>
```
Expand All @@ -283,7 +283,7 @@ Here's what you need to know about `<can-template>`:
The custom element can add additional data, like `message`, to these
templates. We will see how to do that in the next section.

#### Calling the templates with `{{this.template()}}`
#### Calling the templates with `{{ this.template() }}`

Once templates are passed to a custom element, you can call those templates
within the `StacheElement`'s [can-stache-element/static.view]. For example,
Expand Down Expand Up @@ -319,10 +319,10 @@ customElements.define("my-app", App);
</script>
```
@codepen
@highlight 8,17-26,only
@highlight 19,23,only

While the above will render the passed `messageTemplate`, it will not provide it
a `{{message}}` variable that can be read. You can pass values into a template
a `{{ message }}` variable that can be read. You can pass values into a template
with a [can-stache/expressions/hash]. The following passes the message:

```html
Expand All @@ -333,7 +333,7 @@ import { StacheElement } from "can/everything";
class HelloWorld extends StacheElement {
static view = `
<div>{{ this.messageTemplate( message = this.message) }}</div>
<div>{{ this.messageTemplate(message = this.message) }}</div>
`;
static props = {
messageTemplate: {type: Function, required: true},
Expand All @@ -355,7 +355,7 @@ customElements.define("my-app", App);
</script>
```
@codepen
@highlight 8
@highlight 8,only

Sometimes, instead of passing each variable, you might want to pass the
entire custom element:
Expand All @@ -368,7 +368,7 @@ import { StacheElement } from "can/everything";
class HelloWorld extends StacheElement {
static view = `
<div>{{ this.messageTemplate( helloWorld=this ) }}</div>
<div>{{ this.messageTemplate(helloWorld = this) }}</div>
`;
static props = {
messageTemplate: {type: Function, required: true},
Expand Down Expand Up @@ -407,7 +407,7 @@ import { StacheElement } from "can/everything";
class HelloWorld extends StacheElement {
static view = `
{{# if( this.messageTemplate ) }}
<div>{{ this.messageTemplate( helloWorld=this ) }}</div>
<div>{{ this.messageTemplate(helloWorld = this) }}</div>
{{ else }}
<h1>Default: {{this.message}}</h1>
{{/ if }}
Expand All @@ -422,9 +422,6 @@ customElements.define("hello-world", HelloWorld);
class App extends StacheElement {
static view = `
<hello-world>
<can-template name="messageTemplate">
<h1>{{ helloWorld.message }}</h1>
</can-template>
</hello-world>
`;
}
Expand All @@ -444,12 +441,12 @@ import { StacheElement, stache } from "can/everything";
class HelloWorld extends StacheElement {
static view = `
<div>{{ this.messageTemplate( helloWorld=this ) }}</div>
<div>{{ this.messageTemplate(helloWorld = this) }}</div>
`;
static props = {
messageTemplate: {
type: Function,
default: stache(`<h1>Default: {{helloWorld.message}}</h1>`)
default: stache(`<h1>Default: {{ helloWorld.message }}</h1>`)
},
message: "Hello World"
}
Expand All @@ -459,9 +456,6 @@ customElements.define("hello-world", HelloWorld);
class App extends StacheElement {
static view = `
<hello-world>
<can-template name="messageTemplate">
<h1>{{ helloWorld.message }}</h1>
</can-template>
</hello-world>
`;
}
Expand All @@ -482,12 +476,12 @@ import { StacheElement, stache } from "can/everything";
class HelloWorld extends StacheElement {
static view = `
<div>{{ this.messageTemplate( helloWorld=this ) }}</div>
<div>{{ this.messageTemplate(helloWorld = this) }}</div>
`;
static props = {
messageTemplate: {
type: Function,
default: stache(`<h1>Default: {{helloWorld.message}}</h1>`)
default: stache(`<h1>Default: {{ helloWorld.message }}</h1>`)
},
message: "Hello World"
}
Expand Down Expand Up @@ -544,7 +538,7 @@ To test an element's properties and methods, call the [can-stache-element/lifecy
import { StacheElement } from "can/everything";
class Counter extends StacheElement {
static view = `
Count: <span>{{this.count}}</span>
Count: <span>{{ this.count }}</span>
<button on:click="this.increment()">+1</button>
`;
static props = {
Expand Down Expand Up @@ -574,7 +568,7 @@ To test an element's view, call the [can-stache-element/lifecycle-methods.render
import { StacheElement } from "can/everything";
class Counter extends StacheElement {
static view = `
Count: <span>{{this.count}}</span>
Count: <span>{{ this.count }}</span>
<button on:click="this.increment()">+1</button>
`;
static props = {
Expand Down Expand Up @@ -605,7 +599,7 @@ import { StacheElement } from "can/everything";

class Timer extends StacheElement {
static view = `
<p>{{this.time}}</p>
<p>{{ this.time }}</p>
`;
static props = {
time: { type: Number, default: 0 },
Expand Down

0 comments on commit 466d4ff

Please sign in to comment.