README.md

Aurelia Code Sandbox

A place to illustate code usage

Table of Contents

1. Quick Start Instructions
2. Child VM
3. Dynamic Routes
4. Wizard & Routing
5. aurelia cube using threejs

Quick Start Instructions

3. make sure you have visual studio 2013 Update 4
4. install typescript 1.4 for Visual Studio 2013
5. run visual studio
6. open solution in code-sandbox
7. run solution using chrome

Creating a VM that has a property that is an object, like a child VM

Files:

1. child-vm.html

   <template>
       <section>
           <h2>child-vm code sample</h2>
           <h2>my name is ${myChild.name}</h2>
       </section>
   </template>

2. child-vm.ts

   import m = require("views/my-child-vm");
   
   export class ChildVM {
       public myChild: m.MyChildVM;
   
       constructor() {
           this.myChild = new m.MyChildVM("jhonny");
       }
   }

3. my-child-vm.ts

   export class MyChildVM {
       public name: string;
   
       constructor(name: string) {
           this.name = name;
       }
   }

Adding a Route Dynamically

Files:

1. in welcome.html

   button to add dynamic route

   <h2>Dynamic Route</h2>
   <button click.delegate="addDynamicRoute()">Add Dynamic Route</button>

2. welcome.ts

   welcome view model handler to add dynamic route

   addDynamicRoute() {
       this.theRouter.addRoute({ route: "dyno-view", moduleId: "views/dyno-view", nav: true, title: "dyno-view" });
       this.theRouter.refreshNavigation();
   }

3. dyno-view.html

   <template>
       <section>
           <h2>dyno-view</h2>
       </section>
   </template>

4. dyno-view.ts

   export class DynoView {} 

Wizard Routing Sample

1. wizard navigation

   getActiveRouteIndex() {
       for (var routeIndex in this.router.navigation) {
           var route = this.router.navigation[routeIndex];
           if (route.isActive) {
               return routeIndex;
           }
       }
   }
   
   next() {
       var currentIndex = this.getActiveRouteIndex();
       if (currentIndex < this.router.navigation.length - 1) {
           currentIndex++;
           this.router.navigate(this.router.navigation[currentIndex].config.route, true);
       }
   }
   
   prev() {
       var currentIndex = this.getActiveRouteIndex();
       if (currentIndex > 0) {
           currentIndex--;
           this.router.navigate(this.router.navigation[currentIndex].config.route, true);
       }
   }

2. wizard template

   <template>
       <section>
           <h1>wizard</h1>
           <div>
               <div class="col-md-2">
                   <ul class="well nav nav-pills nav-stacked">
                       <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
                           <a href.bind="row.href">${row.title}</a>
                       </li>
                   </ul>
               </div>
               <button click.delegate="prev()" class="col-md-1"><</button>
               <div class="col-md-8">
                   <router-view></router-view>
               </div>
               <button click.delegate="next()" class="col-md-1">></button>
           </div>
       </section>
   </template>

aurelia cube using threejs

view video

1. view: aurelia-cube.html

   <template>
       <section>
           <h2>aurelia cube</h2>
           <div ref="sceneDiv" style="width: 500px; height: 400px;"></div>
       </section>
   </template>

2. view model: aurelia-cube.ts

   import THREE = require("three");
   
   export class AureliaCube {
   
       public camera: THREE.Camera;
       public scene: THREE.Scene;
       public renderer: THREE.Renderer;
       public mesh: THREE.Mesh;
       public sceneDiv: HTMLDivElement;
   
       public attached() {
           this.init();
           this.animate();
       }
   
       public init = () => {
           this.scene = new THREE.Scene();
           this.camera = new THREE.PerspectiveCamera(70, this.sceneDiv.offsetWidth / this.sceneDiv.offsetHeight, 1, 1000);
   
           var light = new THREE.DirectionalLight(0xffffff);
           light.position.set(0, 1, 1).normalize();
           this.scene.add(light);
   
           var geometry = new THREE.BoxGeometry(30, 30, 30);
           var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('/images/aurelia-logo.png') });
   
   
           this.mesh = new THREE.Mesh(geometry, material);
           this.mesh.position.z = -50;
           this.scene.add(this.mesh);
   
           this.renderer = new THREE.WebGLRenderer({ alpha: true });
           this.renderer.setSize(this.sceneDiv.offsetWidth, this.sceneDiv.offsetHeight);
           this.sceneDiv.appendChild(this.renderer.domElement);
   
           this.render();
       }
   
       public animate = () => {
           this.mesh.rotation.x += .01;
           this.mesh.rotation.y += .005;
   
           this.render();
           requestAnimationFrame(this.animate);
       }
   
       public render = () => {
           this.renderer.render(this.scene, this.camera);
       }
   }