Nepoxx · September 30, 2016 17:59 · Sep 30, 2016 · Sep 20, 2016 · Sep 20, 2016 · Apr 12, 2016
diff --git a/app.html b/app.html
@@ -1,3 +1,22 @@
 <template>
-  <h1>${message}</h1>
+  <require from="keys"></require>
+  <require from="stringTypeOf"></require>
+  <require from="titlerize"></require>
+  <form class="form-horizontal form-label-left input_mask">
+      <div class="form-group" repeat.for="key of data | keys">
+        Key: ${key}, Value: ${data[key]}
+        <br>
+        <label class="control-label col-md-3 col-sm-3 col-xs-12">Title: ${key | titlerize}</label>
+
+        <div class="col-md-9 col-sm-9 col-xs-12">
+          Compose:<compose view-model="${data[key] | stringTypeOf}-form"
+                   view="${data[key] | stringTypeOf}-form.html"
+                   model.bind="data[key]"></compose>
+                   <br>
+          Direct:<input type="number" class="form-control" placeholder="0" min="0" value.bind="data[key]">
+        </div>
+      </div>
+      <div class="ln_solid"></div>
+    </form>
 </template>
+6
diff --git a/app.js b/app.js
@@ -1,3 +1,3 @@
 export class App {
-  message = 'Hello World!';
+  data = {a: 5};
 }
diff --git a/keys.js b/keys.js
@@ -0,0 +1,5 @@
+export class KeysValueConverter {
+  toView(object) {
+    return Object.keys(object);
+  }
+}
diff --git a/number-form.html b/number-form.html
@@ -0,0 +1,3 @@
+<template>
+  <input type="number" class="form-control" placeholder="0" min="0" value.bind="model">
+</template>
diff --git a/number-form.js b/number-form.js
@@ -0,0 +1,5 @@
+export class NumberForm {
+  activate(model) {
+    this.model = model;
+  }
+}
diff --git a/stringTypeOf.js b/stringTypeOf.js
@@ -0,0 +1,5 @@
+export class StringTypeOfValueConverter {
+  toView(object) {
+    return typeof object;
+  }
+}
diff --git a/titlerize.js b/titlerize.js
@@ -0,0 +1,6 @@
+export class TitlerizeValueConverter {
+  toView(camelCaseString) {
+    const string = camelCaseString.replace(/([A-Z]+)/g, " $1");
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+}
diff --git a/app.html b/app.html
@@ -1,8 +1,3 @@
 <template>
-  <label>
-    <input type="checkbox" ref="showHeader" checked="true">
-    Show Header?
-  </label>
-  <h1 if.bind="showHeader.checked" ref="theHeader">${message}</h1>
-  The header is: ${theHeader}
+  <h1>${message}</h1>
 </template>
diff --git a/app.html b/app.html
@@ -1,3 +1,8 @@
 <template>
-  <h1>${message}</h1>
+  <label>
+    <input type="checkbox" ref="showHeader" checked="true">
+    Show Header?
+  </label>
+  <h1 if.bind="showHeader.checked" ref="theHeader">${message}</h1>
+  The header is: ${theHeader}
 </template>
diff --git a/index.html b/index.html
@@ -7,10 +7,12 @@
   <body aurelia-app>
     <h1>Loading...</h1>
 
-    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
-    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
+    <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>
-      System.import('aurelia-bootstrapper');
+      require(['aurelia-bootstrapper']);
     </script>
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -2,14 +2,13 @@
 <html>
   <head>
     <title>Aurelia</title>
-    <link rel="stylesheet" href="styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
-  <body aurelia-app="main">
+  <body aurelia-app>
     <h1>Loading...</h1>
 
-    <script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/jspm_packages/system.js"></script>
-    <script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/config2.js"></script>
+    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
+    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
     <script>
       System.import('aurelia-bootstrapper');
     </script>

diff --git a/main.js b/main.js
@@ -1,17 +0,0 @@
-/*******************************************************************************
- * The following two lines enable async/await without using babel's
- * "runtime" transformer. Uncomment the lines if you intend to use async/await.
- * 
- * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
- */
-//import regeneratorRuntime from 'babel-runtime/regenerator';
-//window.regeneratorRuntime = regeneratorRuntime;
-/******************************************************************************/
-
-export function configure(aurelia) {
-  aurelia.use
-    .standardConfiguration()
-    .developmentLogging();
-
-  aurelia.start().then(a => a.setRoot());
-}

diff --git a/styles.css b/styles.css
@@ -1,2 +0,0 @@
-/* Styles go here */
-

diff --git a/app.html b/app.html
@@ -0,0 +1,3 @@
+<template>
+  <h1>${message}</h1>
+</template>
diff --git a/app.js b/app.js
@@ -0,0 +1,3 @@
+export class App {
+  message = 'Hello World!';
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Aurelia</title>
+    <link rel="stylesheet" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body aurelia-app="main">
+    <h1>Loading...</h1>
+
+    <script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/jspm_packages/system.js"></script>
+    <script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/config2.js"></script>
+    <script>
+      System.import('aurelia-bootstrapper');
+    </script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,17 @@
+/*******************************************************************************
+ * The following two lines enable async/await without using babel's
+ * "runtime" transformer. Uncomment the lines if you intend to use async/await.
+ * 
+ * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
+ */
+//import regeneratorRuntime from 'babel-runtime/regenerator';
+//window.regeneratorRuntime = regeneratorRuntime;
+/******************************************************************************/
+
+export function configure(aurelia) {
+  aurelia.use
+    .standardConfiguration()
+    .developmentLogging();
+
+  aurelia.start().then(a => a.setRoot());
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,2 @@
+/* Styles go here */
+
No results found