{{ let VARIABLE_NAME=VALUE [,HASHES] }}

The let helper allows you to create a variable local to the template.

The following creates a first and last helper that reference the ViewModel's name.first and name.last value:

<let-example></let-example>
<script type="module">
import {Component} from "can";

Component.extend({
    tag: "let-example",
    view: `
        {{let first=this.name.first, last=this.name.last}}
        <p>First: {{first}}, Last: {{last}}</p>
    `,
    ViewModel: {
        user: {
            default() {
                return {
                    name: {
                        first: "Justin",
                        last: "Meyer"
                    }
                };
            }
        }
    }
});
</script>

let must be followed by keys and values. The following is valid:

{{ let varA=this.propA, varB=null, varC=undefined }}

But the following (currently) is not:

{{ let varA, varB }}

If you want to create two undefined variables, you must (currently) do so like:

{{ let varA=undefined, varB=undefined }}

{{# let VARIABLE_NAME=VALUE [,HASHES] }}FN{{/ let}}

Allows to create a variable local to the template multiple times.

The following creates name variable two times, a different value is referenced each time.

<script type="module">

import {Component} from "can";

Component.extend({
    tag: "my-app",
    view: `
        {{# let name="Cherif" }}
            <div> Customer: {{name}} </div>
        {{/ let }}

        {{# let name="XBox" }}
            <div> Product: {{name}} </div>
        {{/ let }}
    `,
    ViewModel: {}
});
</script>

<let-example></let-example>
<script type="module">
import {Component} from "can";

Component.extend({
    tag: "let-example",
    view: `
        {{let first=this.name.first, last=this.name.last}}
        <p>First: {{first}}, Last: {{last}}</p>
    `,
    ViewModel: {
        user: {
            default() {
                return {
                    name: {
                        first: "Justin",
                        last: "Meyer"
                    }
                };
            }
        }
    }
});
</script>

<for-let-example></for-let-example>
<script type="module">
import {Component} from "can";

Component.extend({
    tag: "for-let-example",
    view: `
        {{# for(user of this.users) }}
            {{let first=user.name.first, last=this.name.last}}
            <p>First: {{first}}, Last: {{last}}</p>
        {{/ for}}
    `,
    ViewModel: {
        users: {
            default() {
                return [
                    { name: { first: "Justin", last: "Meyer" } },
                    { name: { first: "Ramiya", last: "Meyer" } }
                ];
            }
        }
    }
});
</script>