CollinHerber/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.js.
-->
<body>
  <my-app></my-app>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>

## package.json
{
  "dependencies": {
     "aurelia": "dev",
     "@aurelia/router-lite": "dev",
     "devextreme": "^22.2.5"
  }
}

## src\main.js
import Aurelia from 'aurelia';
import { MyApp } from './my-app';
import { RouterConfiguration } from '@aurelia/router-lite';

Aurelia
  .register(
    RouterConfiguration.customize({
      useUrlFragmentHash: false,
    })
  )
  .app(MyApp).start();

## src\my-app.html
<!--
Try to create a paired css/scss/sass/less file like my-app.scss.
It will be automatically imported based on convention.
 -->

<!--
There is no bundler config you can change in Dumber Gist to
turn on shadow DOM.
But you can turn shadow DOM on by adding a meta tag in every
html template:
<use-shadow-dom>
-->
<h1>${message}</h1>
<div id="grid-control" ref="control"></div>
<button type="button" load="new-page/5">Manual Route Button</button>
<a ref="linkEl" class="d-none">
    <button type="button">Button</button>
</a>
<au-viewport></au-viewport>

## src\my-app.js
import 'devextreme/dist/css/dx.material.purple.dark.compact.css';
import DataGrid from 'devextreme/ui/data_grid';
import {route, Router} from "@aurelia/router-lite";
import {inject} from 'aurelia';

@inject(Router)
@route({
    path: '',
    routes: [
      {
        path: 'new-page/:id',
        component: () => import('./new-page/new-page'),
      }
    ]
})
export class MyApp {
  message = 'Hello Aurelia 2!';
  router;
  constructor(router) {
     this.router = router;
  }

  data = [ {identifier: "abc", id: 1}, {identifier: "def", id: 2}  ]
  control;
  attached() {
    this.columns = [
      {
        dataField: this.nameOverride ?? 'identifier',
      },
      {
        caption: '',
        cellTemplate: this.linkTemplate,
        alignment: 'center',
      },
    ];
    this.dataGrid = new DataGrid(this.control, { columns: this.columns, dataSource: this.data });
  }

  routeToItem(id) {
    this.router.load(`new-page/${id}`);
  }


  linkTemplate = (container, options) => {
    const clone = this.linkEl.cloneNode(true) as HTMLSpanElement;
    clone.classList.remove('d-none');
    clone.onclick = () => this.routeToItem(options.data.id);
    container.append(clone);
  };
}

## src\new-page\new-page.html
<h1>New Page</h1>
<span>Id = ${id}</span>

## src\new-page\new-page.js
import { IRouteViewModel } from "@aurelia/router-lite";

export class NewPage implements IRouteViewModel {
  id;
  loading(params) {
    console.log(params);
    this.id = params.id;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
	<base href="/">
	</head>
	<!--
	Dumber Gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to "main" (data-main attribute on script)
	which is your src/main.js.
	-->
	<body>
	<my-app></my-app>
	<script src="/dist/entry-bundle.js" data-main="main"></script>
	</body>
	</html>
	{
	"dependencies": {
	"aurelia": "dev",
	"@aurelia/router-lite": "dev",
	"devextreme": "^22.2.5"
	}
	}
	import Aurelia from 'aurelia';
	import { MyApp } from './my-app';
	import { RouterConfiguration } from '@aurelia/router-lite';

	Aurelia
	.register(
	RouterConfiguration.customize({
	useUrlFragmentHash: false,
	})
	)
	.app(MyApp).start();
	<!--
	Try to create a paired css/scss/sass/less file like my-app.scss.
	It will be automatically imported based on convention.
	-->

	<!--
	There is no bundler config you can change in Dumber Gist to
	turn on shadow DOM.
	But you can turn shadow DOM on by adding a meta tag in every
	html template:
	<use-shadow-dom>
	-->
	<h1>${message}</h1>
	<div id="grid-control" ref="control"></div>
	<button type="button" load="new-page/5">Manual Route Button</button>
	<a ref="linkEl" class="d-none">
	<button type="button">Button</button>
	</a>
	<au-viewport></au-viewport>
	import 'devextreme/dist/css/dx.material.purple.dark.compact.css';
	import DataGrid from 'devextreme/ui/data_grid';
	import {route, Router} from "@aurelia/router-lite";
	import {inject} from 'aurelia';

	@inject(Router)
	@route({
	path: '',
	routes: [
	{
	path: 'new-page/:id',
	component: () => import('./new-page/new-page'),
	}
	]
	})
	export class MyApp {
	message = 'Hello Aurelia 2!';
	router;
	constructor(router) {
	this.router = router;
	}

	data = [ {identifier: "abc", id: 1}, {identifier: "def", id: 2} ]
	control;
	attached() {
	this.columns = [
	{
	dataField: this.nameOverride ?? 'identifier',
	},
	{
	caption: '',
	cellTemplate: this.linkTemplate,
	alignment: 'center',
	},
	];
	this.dataGrid = new DataGrid(this.control, { columns: this.columns, dataSource: this.data });
	}

	routeToItem(id) {
	this.router.load(`new-page/${id}`);
	}


	linkTemplate = (container, options) => {
	const clone = this.linkEl.cloneNode(true) as HTMLSpanElement;
	clone.classList.remove('d-none');
	clone.onclick = () => this.routeToItem(options.data.id);
	container.append(clone);
	};
	}
	import { IRouteViewModel } from "@aurelia/router-lite";

	export class NewPage implements IRouteViewModel {
	id;
	loading(params) {
	console.log(params);
	this.id = params.id;
	}
	}