Skip to content

Instantly share code, notes, and snippets.

@MarkHerhold
Forked from jdanyow/app.html
Last active May 1, 2016 20:07
Show Gist options
  • Save MarkHerhold/a9f4ceef632620eed1d10d93c891a193 to your computer and use it in GitHub Desktop.
Save MarkHerhold/a9f4ceef632620eed1d10d93c891a193 to your computer and use it in GitHub Desktop.
Parent Inheritance Issue
<template>
<require from="./group"></require>
<group group.two-way="groups"></group>
</template>
import { bindable } from 'aurelia-framework';
export class App {
@bindable groups = {
type: 'group',
id: 'g1',
condition: 'AND',
// rules: [{
// id: '1'
// }, {
// id: '6'
// }],
groups: [{
type: 'group',
condition: 'OR',
id: 'g2',
// rules: [{
// id: '8'
// }, {
// id: '5'
// }],
groups: [{
type: 'group',
condition: 'OR',
id: 'g3',
// rules: [{
// id: '8'
// }, {
// id: '5'
// }],
groups: [
]
}]
}]
};
}
<template>
<dl>
<dd>
<h4 style="background-color: lightgray">
<p>My id is "${group.id}".</p>
<p>I have ${group.groups.length} child group(s).</p>
<span if.bind="parent">My parent's name is "${parent.name}".</span>
<span if.bind="!parent">I don't have a parent.</span>
</h4>
<content></content>
<group group.two-way="group" repeat.for="group of group.groups"></group>
</dd>
</dl>
</template>
import {bindable, inject} from 'aurelia-framework';
import {OptionalParent} from './optional-parent';
@inject(OptionalParent.of(Group))
export class Group {
@bindable group;
constructor(parent) {
this.parent = parent;
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
thing {
display: block;
border: 1px solid blue;
padding: 5px 5px;
}
</style>
</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>
import {resolver} from 'aurelia-dependency-injection';
@resolver()
export class OptionalParent {
constructor(key) {
this.key = key;
}
get(container) {
if (container.parent && container.parent.hasResolver(this.key, false)) {
return container.parent.get(this.key)
}
return null;
}
static of(key) {
return new OptionalParent(key);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment