Skip to content

Instantly share code, notes, and snippets.

@RomkeVdMeulen

RomkeVdMeulen/app.html

Forked from jsobell/app.html
Last active August 1, 2019 10:29
Show Gist options
  • Save RomkeVdMeulen/79ddeec65d8da990005115c73db970b1 to your computer and use it in GitHub Desktop.
Save RomkeVdMeulen/79ddeec65d8da990005115c73db970b1 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Child Router with Parameters
Raw
app.html
<template>
<router-view></router-view>
</template>
Raw
app.js
export class App {
configureRouter(config, router) {
config.map([
{ route: '', name: 'home', moduleId: 'home'},
{ route: 'user/:id', name: 'user', moduleId: 'user'},
]);
}
}
Raw
home.html
<template>
<h1>Home</h1>
<a route-href="user; params.bind: {id: 1}">User 1</a>
</template>
Raw
home.js
export class Home {}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
user-home.js
import {inlineView} from "aurelia-framework";
@inlineView("<template><p>Welcome to the user view</p></template>")
export class UserHome {}
Raw
user.html
<template>
<h1>User</h1>
<a route-href="userprefs">Go to preferences</a>
<router-view></router-view>
</template>
Raw
user.js
export class User {
configureRouter(config, router) {
config.map([
{ route: '', name: 'user-home', moduleId: 'user-home'},
{ route: 'preferences', name: 'userprefs', moduleId: 'userprefs'},
]);
}
}
Raw
userpref-edit.html
<template>
<h4>Preferences editor</h4>
<p><code>router.generate("userprefs", {id: 1})</code>: <code>${backURL}</code></p>
<p><code>router.generate("userprefs", {id: 2})</code>: <code>${user2URL}</code></p>
<p><code>router.generate("userprefs")</code>: <code>${backURLNoParams}</code></p>
</template>
Raw
userpref-edit.js
import {inject} from "aurelia-framework";
import {Router} from "aurelia-router";
@inject(Router)
export class UserprefsEdit {
constructor(router) {
this.backURL = router.generate("userprefs", {id: 1});
this.user2URL = router.generate("userprefs", {id: 2});
this.backURLNoParams = router.generate("userprefs");
}
}
Raw
userpref-home.js
import {inlineView} from "aurelia-framework";
@inlineView("<template><p>Welcome to the user preferences view</p></template>")
export class UserHome {}
Raw
userprefs.html
<template>
<h2>Preferences</h2>
<a route-href="userpref-edit">Edit prefs</a>
<router-view></router-view>
</template>
Raw
userprefs.js
export class User {
configureRouter(config, router) {
config.map([
{ route: '', name: 'userpref-home', moduleId: 'userpref-home'},
{ route: 'edit', name: 'userpref-edit', moduleId: 'userpref-edit'},
]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment