Skip to content

Instantly share code, notes, and snippets.

@deap82

deap82/app.html

Last active January 31, 2018 15:07
Show Gist options
  • Save deap82/bfc3c4043bf5b8a6001209bb826c5cee to your computer and use it in GitHub Desktop.
Save deap82/bfc3c4043bf5b8a6001209bb826c5cee to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist - slot inside inner custom element
Raw
app.html
<template>
<!-- ==================================================== -->
<require from="./custom-outer"></require>
<section>
<h2>Using custom element</h2>
<custom-outer items.bind="items">
<template replace-part="item-template">${item.value}</template>
</custom-outer>
</section>
<!-- ==================================================== -->
<!-- ==================================================== -->
<require from="./custom-c"></require>
<section>
<h2>Using custom element</h2>
<custom-c items.bind="items">
<template replace-part="item-template">${item.value}</template>
</custom-c>
</section>
<!-- ==================================================== -->
<!-- ==================================================== -->
<section>
<h2>Using compose</h2>
Should <code>replaceable</code>, <code>replace-part</code> and <code>part</code> work with <code>compose</code>?
<compose view="./template-a.html">
<template replace-part="item-template">foo</template>
</compose>
</section>
<!-- ==================================================== -->
<!-- ==================================================== -->
<section>
<require from="./custom-a"></require>
<h1>${message}</h1>
<p>Proof of concept for having a custom element whose custom content (slot) is forwarded to the slot of an inner custom element.</p>
<p>Note: This example could have been made with .html files only for the custom elements.</p>
<custom-a view-model.ref="aRef" inner-name="nameForB">
<div>
My custom content, I'd like bindings here to work in the context of "custom-b"...
<h3>Assuming b context - <u>not working</u></h3>
<p>${ messageInB } <!-- <-- Binding is not working --></p>
<h3>Using view-model.ref to get a path for b context</h3>
<p>${ aRef.bRef.messageInB }</p>
<h3>Is there any way I could set the name "bRef" from app.html? - <u>not working</u></h3>
<p>${ aRef.nameForB.messageInB }</p>
<p>${ data.dataMessage }</p>
</div>
</custom-a>
</section>
<!-- ==================================================== -->
<div id="output-wrapper">
<div id="output"></div>
<button type="button" onclick="document.getElementById('output').innerHTML='';">Clear</button>
</div>
</template>
Raw
app.js
import { OutputService as console } from 'output-service';
export class App {
message = 'Hello World!';
data = { dataMessage: 'dataMessage' };
items = [ {name: 'item1', value: '1' }, {name: 'item2', value: '2' },{name: 'item3', value: '3' },{name: 'item3', value: '3' },{name: 'item3', value: '3' } ];
constructor() {
}
attached() {
}
}
Raw
custom-a.js
import { customElement, inlineView, bindable } from 'aurelia-framework';
@customElement('custom-a')
@inlineView('<template><require from="./custom-b"></require><h2>Hello from A</h2><custom-b view-model.ref="bRef"><slot></slot></custom-b></template>')
export class CustomA {
@bindable innerName;
innerNameChanged(newValue) {
if(newValue) {
this[this.innerName] = this.bRef;
}
}
}
Raw
custom-b.js
import { customElement, inlineView, bindable } from 'aurelia-framework';
@customElement('custom-b')
@inlineView('<template><h2>Hello from B</h2><slot>Default content</slot></template>')
export class CustomB {
@bindable messageInB = 'Message in B';
}
Raw
custom-c.html
<template>
<h2>Hello from C</h2>
<ul>
<li repeat.for="item of items" >
<span>always</span>
<template replaceable part="item-template">
Original: ${item.name}
</template>
</li>
</ul>
</template>
Raw
custom-c.js
import { customElement, inlineView, bindable } from 'aurelia-framework';
@customElement('custom-c')
export class CustomC {
@bindable items;
}
Raw
custom-outer.js
import { customElement, inlineView, bindable } from 'aurelia-framework';
@customElement('custom-outer')
@inlineView('<template><require from="./custom-c"></require><h2>Hello from Outer</h2><custom-c items.bind="items"><slot></slot></custom-c></template>')
export class CustomOuter {
@bindable items;
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" />
</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
output-service.js
export class OutputService {
static log(message) {
var outputEl = document.getElementById('output');
var currentContent = outputEl.innerHTML;
outputEl.innerHTML = message + '<br />' + currentContent;
console.log(message);
}
}
Raw
styles.css
html, html *, html *:before, html *:after {
box-sizing: border-box;
}
#output-wrapper {
padding: 0px 0 10px 10px;
border-top: 1px solid orange;
background: #FFFFA5;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 150px;
font-family: Consolas;
}
#output-wrapper #output {
padding-top: 10px;
overflow-y: auto;
height: calc(100% - 30px);
}
#output-wrapper button {
position: absolute;
bottom: 10px;
}
section + section {
margin-top: 40px;
border-top: solid 1px gray;
padding-top: 40px;
}
Raw
template-a.html
<template>
<h2>Hello from template A</h2>
<ul>
<li repeat.for="item of items" >
<span>always</span>
<template replaceable part="item-template">
Original: ${item.name}
</template>
</li>
</ul>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment