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
      • 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
        • static
          • currentRule
          • data
          • deparam
          • isCurrent
          • param
          • register
          • rule
          • start
          • stop
          • url
          • urlData
        • deprecated
          • link
      • 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

data

  • Edit on GitHub

An observable key-value object used to cross bind to the url observable urlData. Set it to cross-bind a top level state object (Application ViewModel) to can-route.

Object

If route.data is set to a can-reflected observable object of key-value pairs, once start is called, changes in route.data's properties will update the hash and vice-versa. route.data defaults to a can-define/map/map.

<mock-url></mock-url>
<script type="module">
import {DefineMap, route} from "can";
import "//unpkg.com/mock-url@^5.0.0/mock-url.mjs";

route.data = new DefineMap( {page: ""} );
route.register( "{page}" );
route.start();

location.hash = "#!example";

setTimeout(()=> {
  console.log( route.data ); //-> {page: "example"}
}, 100);
</script>

HTMLElement

If route.data is set to an element, its observable can-view-model will be used as the observable connected to the browser's hash.

Deprecated

Assigning an HTMLElement to route.data has been deprecated in favor of setting it to an observable. If you have any further questions please refer to the Routing guide.

For in-depth examples see the the Routing guide.

Use

route.data defaults to can-define/map/map, but route.data can be set to any observable. The following uses can-observe:

import {DefineMap, route, observe} from "can/everything";

route.data = new observe();
route.register( "{page}", { page: "home" } );
route.start();
console.log( route.data.page ) //-> "home"

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