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 {Component} from "can";
import "//unpkg.com/mock-url@5";

Component.extend({
  tag: "cooking-example",
  view: `
    <a {{# routeCurrent(page="recipe", true) }}class='active'{{/ routeCurrent }}
      href='{{ routeUrl(page="recipe" id=5) }}'
    >{{recipe.name}}</a>
  `,
  ViewModel: {
    recipe: {
      default() {
        return [{name: "apple pie"}];
      }
    }
  }
});
</script>

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

<li class='active'>
  <a href='#!&page=recipe&id=5'>{{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 {Component} from "can";
import "//unpkg.com/mock-url@5";

Component.extend({
  tag: "cooking-example",
  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>
  `,
});
</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 {Component, route} from "can";

Component.extend({
  tag: "my-nav",
  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 }}
  `,
  ViewModel: {
    routeData: {
      default() {
        route.register("{page}", {page: "home"});
        route.start();
        return route.data;
      }
    }
  }
});
</script>

routeCurrent(hash)