Skip to content

Instantly share code, notes, and snippets.

@TimvdLippe
Created March 30, 2016 19:53
Show Gist options
  • Save TimvdLippe/9bfebc20aec75dd36126b8162c310dff to your computer and use it in GitHub Desktop.
Save TimvdLippe/9bfebc20aec75dd36126b8162c310dff to your computer and use it in GitHub Desktop.
Iron-pages with default route.
<html>
<body>
<carbon-location route="{{route}}"></carbon-location>
<carbon-route pattern="/:page" route="{{route}}" data="{{data}}" tail="{{subData}}"></carbon-route>
<iron-pages attr-for-selected="data-route" selected="{{data.page}}" default-selected="404">
<!--
Example locations:
domain.com/users
domain.com/users/11
-->
<user-page data-route="users" user-info="{{subData}}"></user-page>
<!--
Example locations:
domain.com/store/Amsterdam/Shoes
domain.com/store/Amsterdam/Clothing
domain.com/store/New-York/Clothing
-->
<store-page data-route="store" store-info="{{subData}}"></store-page>
<!--
Example locations:
domain.com/blabla
domain.com/oops
domain.com/foo
-->
<404-page data-route="404"></404-page>
</iron-pages>
</body>
</html>
<dom-module id="store-page">
<template>
<carbon-route pattern="/:location/:category" route="{{storeInfo}}" data="{{data}}"></carbon-route>
<span hidden$="{{!data.location}}">Welcome to our store in {{data.location}} looking for {{data.category}}.</span>
<span hidden$="{{data.location}}">No user was found. Please Register!</span>
</template>
<script>
Polymer({
is: "user-page",
properties: {
storeInfo: Object
}
})
</script>
</dom-module>
<dom-module id="user-page">
<template>
<carbon-route pattern="/:userId" route="{{userInfo}}" data="{{data}}"></carbon-route>
<span hidden$="{{!data.userId}}">User Id: {{userId}}</span>
<span hidden$="{{data.userId}}">No user was found. Please Register!</span>
</template>
<script>
Polymer({
is: "user-page",
properties: {
userInfo: Number
}
})
</script>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment