djedi · February 21, 2018 16:18 · Feb 21, 2018 · Feb 20, 2018 · Feb 20, 2018 · Feb 20, 2018
diff --git a/app.html b/app.html
@@ -7,7 +7,7 @@
 </my-code-sample>
 
 <my-code-sample>
-<table>
+<table border="1">
   <thead>
     <tr>
       <td>Head 1</td>

diff --git a/my-code-sample.js b/my-code-sample.js
@@ -14,6 +14,6 @@ export class MyCodeSample {
     @child('code-sample') codeSample;
 
     attached() {
-        this.code = this.codeSample.data;
+        this.code = this.codeSample.data.trim();
     }
 }
diff --git a/app.html b/app.html
@@ -1,5 +1,6 @@
 <template>
   <require from="./my-code-sample"></require>
+  <require from="./my-button.html"></require>
 
 <my-code-sample>
 <br><hr><hr>

diff --git a/my-code-sample.html b/my-code-sample.html
@@ -13,7 +13,7 @@
         <div>
             <pre><code class="language-markup" au-syntax textcontent.bind="code"></code></pre>
         </div>
-        <div innerhtml.bind="code"></div>
+        <template replaceable part="rendered"></template>
     </div>
 
     <br><br>

diff --git a/my-code-sample.js b/my-code-sample.js
@@ -6,7 +6,7 @@ import {processContent, child} from 'aurelia-framework';
     const stringified = JSON.stringify(originalContent);
 
     node.innerHTML = `<code-sample data.bind='${stringified}'></code-sample>`; 
-    node.innerHTML += `<template>${originalContent}</template>`;
+    node.innerHTML += `<template replace-part="rendered">${originalContent}</template>`;
 
     return true;
 })

diff --git a/app.html b/app.html
@@ -1,11 +1,11 @@
 <template>
-  <require from="./toggle-code"></require>
+  <require from="./my-code-sample"></require>
 
-<toggle-code>
+<my-code-sample>
 <br><hr><hr>
-</toggle-code>
+</my-code-sample>
 
-<toggle-code>
+<my-code-sample>
 <table>
   <thead>
     <tr>
@@ -18,6 +18,10 @@
     </tr>
   </tbody>
 </table>
-</toggle-code>
+</my-code-sample>
+
+<my-code-sample>
+<my-button></my-button>
+</my-code-sample>
 
 </template>
diff --git a/my-button.html b/my-button.html
@@ -0,0 +1,3 @@
+<template>
+  <button>My Button</button>
+</template>
diff --git a/toggle-code.html → my-code-sample.html b/toggle-code.html → my-code-sample.html
@@ -9,13 +9,12 @@
       }
     </style>
 
-    <div style="${visible ? '' : 'display:none'}">
-        <div style="${render ? 'display:none' : ''}">
+    <div>
+        <div>
             <pre><code class="language-markup" au-syntax textcontent.bind="code"></code></pre>
         </div>
-        <div style="${render ? '' : 'display:none'}" innerhtml.bind="code"></div>
-        <button click.delegate="renderCode()">Render</button>
+        <div innerhtml.bind="code"></div>
     </div>
-    <button click.delegate="toggleCodeBlock()">${visible ? 'Hide' : 'Show'} Code</button>
+
     <br><br>
 </template>
diff --git a/my-code-sample.js b/my-code-sample.js
@@ -0,0 +1,19 @@
+import {processContent, child} from 'aurelia-framework';
+
+
+@processContent((compiler, resources, node) => {
+    const originalContent = node.innerHTML;
+    const stringified = JSON.stringify(originalContent);
+
+    node.innerHTML = `<code-sample data.bind='${stringified}'></code-sample>`; 
+    node.innerHTML += `<template>${originalContent}</template>`;
+
+    return true;
+})
+export class MyCodeSample {
+    @child('code-sample') codeSample;
+
+    attached() {
+        this.code = this.codeSample.data;
+    }
+}
diff --git a/toggle-code.js b/toggle-code.js
@@ -1,27 +0,0 @@
-import {processContent, child} from 'aurelia-framework';
-
-
-@processContent((compiler, resources, node) => {
-    const originalContent = node.innerHTML;
-
-    node.innerHTML = `<hackity-hack style="display:none" data.bind='${JSON.stringify(originalContent)}'></hackity-hack>`;    
-
-    return true;
-})
-export class toggleCode {
-    @child('hackity-hack') hackData;
-
-    attached() {
-        this.visible = true;
-        this.render = false;
-        this.code = this.hackData.data.trim();
-    }
-
-    toggleCodeBlock() {
-        this.visible = !this.visible;
-    }
-
-    renderCode() {
-        this.render = !this.render;
-    }
-}

diff --git a/app.html b/app.html
@@ -0,0 +1,23 @@
+<template>
+  <require from="./toggle-code"></require>
+
+<toggle-code>
+<br><hr><hr>
+</toggle-code>
+
+<toggle-code>
+<table>
+  <thead>
+    <tr>
+      <td>Head 1</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cell 1</td>
+    </tr>
+  </tbody>
+</table>
+</toggle-code>
+
+</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/toggle-code.html b/toggle-code.html
@@ -0,0 +1,21 @@
+<template>
+    <span style="display: none"><slot></slot></span>
+
+    <style>
+      pre {
+        background-color: #eee;
+        border: 1px solid #999;
+        padding: 3px 9px;
+      }
+    </style>
+
+    <div style="${visible ? '' : 'display:none'}">
+        <div style="${render ? 'display:none' : ''}">
+            <pre><code class="language-markup" au-syntax textcontent.bind="code"></code></pre>
+        </div>
+        <div style="${render ? '' : 'display:none'}" innerhtml.bind="code"></div>
+        <button click.delegate="renderCode()">Render</button>
+    </div>
+    <button click.delegate="toggleCodeBlock()">${visible ? 'Hide' : 'Show'} Code</button>
+    <br><br>
+</template>
diff --git a/toggle-code.js b/toggle-code.js
@@ -0,0 +1,27 @@
+import {processContent, child} from 'aurelia-framework';
+
+
+@processContent((compiler, resources, node) => {
+    const originalContent = node.innerHTML;
+
+    node.innerHTML = `<hackity-hack style="display:none" data.bind='${JSON.stringify(originalContent)}'></hackity-hack>`;    
+
+    return true;
+})
+export class toggleCode {
+    @child('hackity-hack') hackData;
+
+    attached() {
+        this.visible = true;
+        this.render = false;
+        this.code = this.hackData.data.trim();
+    }
+
+    toggleCodeBlock() {
+        this.visible = !this.visible;
+    }
+
+    renderCode() {
+        this.render = !this.render;
+    }
+}
No results found