DoneJS StealJS jQuery++ FuncUnit DocumentJS
5.33.3
6.0.0 4.3.0 3.14.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-stache
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
      • can-stache-route-helpers
        • routeCurrent(hash)
        • routeUrl(hashes)
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-tag
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-define-validate-validatejs
      • can-type
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

can-stache-route-helpers

  • npm package badge
  • Star
  • Edit on GitHub

Adds routeUrl and routeCurrent helpers to stache.

undefined

The can-stache-route-helpers module doesn't export anything. It mixes in the following can-stache helpers that use can-route:

  • routeUrl(hashes) The example below shows how to produce a hyperlink reference on an anchor element using the routeUrl helper.

    <mock-url></mock-url>
    <cooking-example></cooking-example>
    <script type="module">
    import {Component} from "can";
    import "//unpkg.com/mock-url@5";
    
    Component.extend({
      tag: "cooking-example",
      view: `<a href='{{ routeUrl(page="recipe" id=5) }}'>{{recipe.name}}</a>`,
      ViewModel: {
        recipe: {
          default() {
            return {name: "apple pie"};
          }
        }
      }
    });
    </script>
    
  • routeCurrent(hash) The next example shows how to use routeCurrent helper. If the url matches the parameters in routeCurrent it will add the 'active' class to the list item, changing the background color:

    <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: `<li>
          <a {{# routeCurrent(page="recipe" id=5) }}class='active'{{/ routeCurrent }}
          href='{{ routeUrl(page="recipe" id=5) }}'>{{recipe.name}}</a>
        </li>`,
      ViewModel: {
        recipe: {
          default() {
            return {name: "apple pie"};
          }
        }
      }
    });
    </script>
    

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 5.33.3.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news