Bitovi

routeCurrent(hash)

Returns if the hash values match the can-route’s current properties.

`routeCurrent( hashes... [,subsetMatch] )`

Calls route.isCurrent with hashes and returns the result. The following example adds the 'active' class on the anchor if route.data.page is equal to "recipes" and route.data.id is equal to 5.

<mock-url></mock-url>
<cooking-example></cooking-example>
<style>
.active {
  color: black;
  text-decoration: none;
}
</style>
<script type="module">
  import { StacheElement } from "can";
  import "//unpkg.com/mock-url@6";

  class CookingExample extends StacheElement {
    static view = `
      <a {{# routeCurrent(page='recipe', true) }}class="active"{{/ routeCurrent }}
        href="{{ routeUrl(page='recipe' id=5) }}">
        {{ this.recipe.name }}
      </a>
    `;

    static props = {
      recipe: {
        get default() {
          return { name: "apple pie" };
        }
      }
    };
  }

  customElements.define("cooking-example", CookingExample);
</script>

With default routes and a url like #!&page=recipe&id=5, this produces:

<li class="active">
  <a href="#!&page=recipe&id=5">{{ this.recipe.name }}</a>
</li>

Parameters

hashes {Hash Expression}:
A hash expression like page='recipe' recipeId=id.

subsetMatch {Boolean}:

If an optional true is passed, routeCurrent will return true if every value in hashes matches the current route data, even if the route data has additional properties that are not matched.

In the following example notice that the active class will apply when clicking on pie, but not cake.

<mock-url></mock-url>
<cooking-example></cooking-example>
<style>
  .active {
    color: black;
    text-decoration: none;
  }
</style>
<script type="module">
  import { StacheElement } from "can";
  import "//unpkg.com/mock-url@6";

  class CookingExample extends StacheElement {
    static view = `
      <a {{# routeCurrent(id='pie' true) }}class="active"{{/ routeCurrent }}
        href="{{ routeUrl(page='recipe' id='pie' }}">
        apple pie
      </a>
      <a {{# routeCurrent(id='cake') }}class="active"{{/ routeCurrent }}
        href="{{ routeUrl(page='recipe' id='cake' }}">
        chocolate cake
      </a>
    `;
  }
  customElements.define("cooking-example", CookingExample);
</script>

Returns

{Boolean}:

Returns the result of calling route.isCurrent.

Use

The following demo uses routeCurrent and routeUrl(hashes) to create links that update can-route’s page attribute:

<my-nav></my-nav>
<script type="module">
  import { StacheElement, route } from "can";

  class MyNav extends StacheElement {
    static view = `
      <a {{^ routeCurrent(page='home') }}
        href="{{ routeUrl(page='home') }}"
        {{/ routeCurrent }}>
        home
      </a>
      <a {{^ routeCurrent(page='restaurants') }}
        href="{{ routeUrl(page='restaurants') }}"
        {{/ routeCurrent }}>
        restaurants
      </a>
      {{# eq(routeData.page, 'home') }}
        <h1>Home page</h1>
      {{ else }}
        <h1>Restaurants page</h1>
      {{/ eq }}
    `;

    static props = {
      routeData: {
        get default() {
          route.register("{page}", { page: "home" });
          route.start();
          return route.data;
        }
      }
    };
  }

  customElements.define("my-nav", MyNav);
</script>

routeCurrent(hash)