feat(with): port the with template controller from vCurrent

README.md

@@ -78,6 +78,7 @@ An experimental re-working of Aurelia, oriented around compile-time reflection a
   * [x] `if`
   * [x] `else`
   * [x] `replaceable`
+  * [x] `with`
   * [ ] `repeat`
 * Custom Elements
   * [x] `compose`

src/runtime/configuration/standard.ts

@@ -16,6 +16,7 @@ import { Compose } from "../resources/compose";
 import { SelfBindingBehavior } from "../resources/self-binding-behavior";
 import { ThrottleBindingBehavior } from "../resources/throttle-binding-behavior";
 import { UpdateTriggerBindingBehavior } from "../resources/update-trigger-binding-behavior";
+import { With } from "../resources/with";
 
 export const StandardConfiguration = {
   register(container: IContainer) {
@@ -37,6 +38,7 @@ export const StandardConfiguration = {
       If,
       Else,
       Replaceable,
+      With,
 
       // Custom Elements
       Compose

src/runtime/resources/if-core.ts

@@ -6,26 +6,26 @@ import { IScope } from '../binding/binding-context';
 * For internal use only. May change without warning.
 */
 export abstract class IfCore {
-  private visual: IVisual = null;
+  private child: IVisual = null;
   private $scope: IScope = null;
 
   // If the child view is animated, `condition` might not reflect the internal
   // state anymore, so we use `showing` for that.
   // Eventually, `showing` and `condition` should be consistent.
   protected showing = false;
 
-  constructor(private viewFactory: IViewFactory, protected viewSlot: IViewSlot) { }
+  constructor(private factory: IViewFactory, protected viewSlot: IViewSlot) { }
 
   unbound() {
-    const visual = this.visual;
+    const visual = this.child;
 
     if (visual === null) {
       return;
     }
 
-    this.visual.unbind();
+    this.child.unbind();
 
-    if (!this.viewFactory.isCaching) {
+    if (!this.factory.isCaching) {
       return;
     }
 
@@ -36,19 +36,19 @@ export abstract class IfCore {
       visual.tryReturnToCache();
     }
 
-    this.visual = null;
+    this.child = null;
   }
 
   show() {
-    if (this.visual === null) {
-      this.visual = this.viewFactory.create();
+    if (this.child === null) {
+      this.child = this.factory.create();
     }
 
-    this.visual.bind(this.$scope);
+    this.child.bind(this.$scope);
 
     if (!this.showing) {
       this.showing = true;
-      return this.viewSlot.add(this.visual);
+      return this.viewSlot.add(this.child);
     }
   }
 
@@ -57,7 +57,7 @@ export abstract class IfCore {
       return;
     }
 
-    const visual = this.visual;
+    const visual = this.child;
     const removed = this.viewSlot.remove(visual);
 
     this.showing = false;

src/runtime/resources/replaceable.ts

@@ -7,18 +7,18 @@ import { IScope } from '../binding/binding-context';
 @templateController
 @inject(IViewFactory, IViewSlot)
 export class Replaceable {
-  private visual: IVisual;
+  private child: IVisual;
 
-  constructor(private viewFactory: IViewFactory, private viewSlot: IViewSlot) {
-    this.visual = this.viewFactory.create();
-    this.viewSlot.add(this.visual);
+  constructor(private factory: IViewFactory, private viewSlot: IViewSlot) {
+    this.child = this.factory.create();
+    this.viewSlot.add(this.child);
   }
 
   bound(scope: IScope) {
-    this.visual.bind(scope);
+    this.child.bind(scope);
   }
 
   unbound() {
-    this.visual.unbind();
+    this.child.unbind();
   }
 }

src/runtime/resources/with.ts

@@ -0,0 +1,35 @@
+import { customAttribute, templateController, inject } from "../decorators";
+import { IViewFactory, IVisual } from "../templating/view-engine";
+import { IViewSlot } from "../templating/view-slot";
+import { IScope, BindingContext } from "../binding/binding-context";
+
+@customAttribute('with')
+@templateController
+@inject(IViewFactory, IViewSlot)
+export class With { 
+  //#region Framework-Supplied
+  private $scope: IScope;
+  //#endregion
+
+  private child: IVisual = null;
+
+  value: any = null;
+
+  constructor(private factory: IViewFactory, private viewSlot: IViewSlot) { 
+    this.child = factory.create();
+    this.viewSlot.add(this.child);
+  }
+
+  valueChanged(newValue: any) {
+    const childScope = {
+      bindingContext: newValue,
+      overrideContext: BindingContext.createOverride(newValue, this.$scope.overrideContext)
+    };
+
+    this.child.bind(childScope);
+  }
+
+  unbound() {
+    this.child.unbind();
+  }
+}