{{ 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 {StacheElement} from "can";

class LetExample extends StacheElement {
  static view = `
    {{let first=this.name.first, last=this.name.last}}
    <p>First: {{first}}, Last: {{last}}</p>
  `;

  static props = {
    user: {
      get default() {
        return {
          name: {
            first: "Justin",
            last: "Meyer"
          }
        };
      }
    }
    };
}

customElements.define("let-example", LetExample);
</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 {StacheElement} from "can";

class MyApp extends StacheElement {
  static view = `
    {{# let name="Cherif" }}
      <div> Customer: {{name}} </div>
    {{/ let }}

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

customElements.define("my-app", MyApp);
</script>

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

class LetExample extends StacheElement {
  static view = `
    {{let first=this.name.first, last=this.name.last}}
    <p>First: {{first}}, Last: {{last}}</p>
  `;

  static props = {
    user: {
      get default() {
        return {
          name: {
            first: "Justin",
            last: "Meyer"
          }
        };
      }
    }
  };
}

customElements.define("let-example", LetExample);
</script>

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

class ForLetExample extends StacheElement {
  static view = `
    {{# for(user of this.users) }}
      {{let first=user.name.first, last=this.name.last}}
      <p>First: {{first}}, Last: {{last}}</p>
    {{/ for}}
  `;

  static props = {
    users: {
      get default() {
        return [
          { name: { first: "Justin", last: "Meyer" } },
          { name: { first: "Ramiya", last: "Meyer" } }
        ];
      }
    }
  };
}

customElements.define("for-let-example", ForLetExample);
</script>