Skip to content

Instantly share code, notes, and snippets.

@Seebiscuit

Seebiscuit/index.html

Last active December 29, 2020 19:22
Show Gist options
  • Save Seebiscuit/647892711af9a7f9d6c55e3e25f977d9 to your computer and use it in GitHub Desktop.
Save Seebiscuit/647892711af9a7f9d6c55e3e25f977d9 to your computer and use it in GitHub Desktop.
Download ZIP
Compose Container Confusion
Raw
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">
<base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.ts.
-->
<body aurelia-app="main">
<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>
Raw
package.json
{
"dependencies": {
"aurelia-bootstrapper": "^2.3.3"
}
}
Raw
src\app.html
<template>
<compose
view="./outer-columns.html">
</compose>
<table>
<thead>
<th>Col Outer</th>
<th>Col Inner </th>
<th>Col Inner</th>
<th>Col Outer</th>
</thead>
<tbody>
<tr
as-element="compose"
view="./outer-columns.html">
</tr>
</tbody>
</table>
</template>
Raw
src\app.ts
export class App {
public message: string = 'Hello Aurelia Buggy!';
public toggleRepeaterComponent = true;
}
Raw
src\inner-columns.html
<template>
<td>Inner Column 1</td>
<td>Inner Column 2</td>
</template>
Raw
src\main.ts
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.globalResources("inner-columns.html")
.developmentLogging('info');
aurelia.start().then(() => aurelia.setRoot());
}
Raw
src\outer-columns.html
<template>
<!-- Delete the require below for the outer cells to magically appear -->
<require from="./inner-columns.html"></require>
<td>Inner Column Start</td>
<inner-columns containerless></inner-columns>
<td>Inner Column End</td>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment