djedi · January 5, 2018 17:09 · Jan 5, 2018 · Jan 5, 2018
diff --git a/my-radio-holder.html b/my-radio-holder.html
@@ -1,3 +1,3 @@
 <template>
-  <div id.bind="id"><slot></slot></div>
+  <div><slot></slot></div>
 </template>
diff --git a/my-radio-holder.js b/my-radio-holder.js
@@ -1,14 +1,16 @@
-import {bindable} from 'aurelia-framework';
+import {bindable, inject} from 'aurelia-framework';
 
+@inject(Element)
 export class MyRadioHolder {
   @bindable name;
-  @bindable id = Math.random().toString(36).slice(-7);
+
+  constructor(element) {
+    this.element = element;
+  }
 
   attached() {
-    let elem = document.getElementById(this.id);
-    if (elem.tagName === 'MY-RADIO-HOLDER') {
-      elem = elem.children[0];
-    }
+    console.debug('[this.element]', this.element.children[0]);
+    let elem = this.element.children[0];
     elem.childNodes.forEach((n) => {
       if (n.tagName === 'MY-RADIO') {
         n.children[0].name = this.name;

diff --git a/app.html b/app.html
@@ -0,0 +1,9 @@
+<template>
+  <require from="./my-radio-holder"></require>
+  <require from="./my-radio"></require>
+
+  <my-radio-holder name="myname" id="force"> <!-- id is optional -->
+    <my-radio>Option 1</my-radio>
+    <my-radio>Option 2</my-radio>
+  </my-radio-holder>
+</template>
diff --git a/app.js b/app.js
@@ -0,0 +1,3 @@
+export class App {
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!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>
diff --git a/my-radio-holder.html b/my-radio-holder.html
@@ -0,0 +1,3 @@
+<template>
+  <div id.bind="id"><slot></slot></div>
+</template>
diff --git a/my-radio-holder.js b/my-radio-holder.js
@@ -0,0 +1,18 @@
+import {bindable} from 'aurelia-framework';
+
+export class MyRadioHolder {
+  @bindable name;
+  @bindable id = Math.random().toString(36).slice(-7);
+
+  attached() {
+    let elem = document.getElementById(this.id);
+    if (elem.tagName === 'MY-RADIO-HOLDER') {
+      elem = elem.children[0];
+    }
+    elem.childNodes.forEach((n) => {
+      if (n.tagName === 'MY-RADIO') {
+        n.children[0].name = this.name;
+      }
+    })
+  }
+}
diff --git a/my-radio.html b/my-radio.html
@@ -0,0 +1,3 @@
+<template>
+  <input type="radio" id.bind="id"><slot></slot></input>
+</template>
diff --git a/my-radio.js b/my-radio.js
@@ -0,0 +1,3 @@
+export class MyRadio {
+
+}
No results found