Connecting the markup to a client side model when aurelia enhancing t…

…he server side rendered razor view

src/FooBar.Web/TagHelpers/AureliaEnhanceTagHelper.cs

@@ -5,16 +5,23 @@
 namespace FooBar.Web.TagHelpers
 {
 	[HtmlTargetElement(Attributes = AuEnhanceAttributeName)]
+	[HtmlTargetElement(Attributes = AuModuleAttributeName)]
 	public class AureliaEnhanceTagHelper : TagHelper
 	{
 		private const string HtmlIdAttributeName = "id";
+
 		private const string AuEnhanceAttributeName = "th-aurelia-enhance";
-
 		[HtmlAttributeName(AuEnhanceAttributeName)]
 		public bool Enhance { get; set; }
 
+		private const string AuModuleAttributeName = "th-aurelia-enhance-module";
+		[HtmlAttributeName(AuModuleAttributeName)]
+		public string Module { get; set; }
+
 		public override void Process(TagHelperContext context, TagHelperOutput output)
 		{
+			Enhance = !String.IsNullOrEmpty(Module);
+
 			if (!Enhance)
 			{
 				return;
@@ -30,13 +37,28 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
 			{
 				elementId = Convert.ToString(output.Attributes[HtmlIdAttributeName].Value);
 			}
-
-			output.PostElement.AppendHtml($@"
+
+			if(!String.IsNullOrEmpty(Module))
+			{
+				output.PostElement.AppendHtml($@"
                 <script>
                     SystemJS.import('app/core/aurelia-enhancer').then(enhancer => {{
-						enhancer.enhance(document.getElementById('{elementId}'));
+						SystemJS.import('{Module}').then(module => {{
+							var clientModel = module.create();
+							enhancer.enhance(clientModel, document.getElementById('{elementId}'));
+						}});
                     }});
                 </script>");
+			}
+			else
+			{
+				output.PostElement.AppendHtml($@"
+                <script>
+                    SystemJS.import('app/core/aurelia-enhancer').then(enhancer => {{
+						enhancer.enhance({{}}, document.getElementById('{elementId}'));
+                    }});
+                </script>");
+			}
 		}
 	}
 }

src/FooBar.Web/Views/Home/About.cshtml

@@ -1,12 +1,15 @@
 @{
     ViewData["Title"] = "About";
 }
-<div th-aurelia-enhance="true">
+<div th-aurelia-enhance-module="app/views/home/home-about">
 	<section>
 		<h2>@ViewData["Title"]</h2>
 		<p>Use this area to provide additional information.</p>
 	</section>
 	<section>
 		Take me to the <a route-href="route: MvcRoute; params.bind: { mvcController: 'Home', mvcAction: 'Contact' }">Contact page</a>
 	</section>
+	<section>
+		<button type="button" click.delegate="showMessage()">Show message</button>
+	</section>
 </div>

src/FooBar.Web/app/core/aurelia-enhancer.ts

@@ -6,11 +6,11 @@ export function init(au: Aurelia): void {
 	aurelia = au;
 }
 
-export function enhance(element: HTMLElement): void {
+export function enhance(clientModel: any, element: HTMLElement): void {
 	let enhanceInstruction: EnhanceInstruction = {
 		container: aurelia.container,
 		resources: aurelia.resources,
-		bindingContext: {},
+		bindingContext: clientModel,
 		element: element
 	};
 	let templatingEngine: TemplatingEngine = aurelia.container.get(TemplatingEngine);

src/FooBar.Web/app/views/home/home-about.ts

@@ -0,0 +1,9 @@
+export function create() {
+	return new HomeAboutClientModel();
+}
+
+class HomeAboutClientModel {
+	showMessage() {
+		alert('Hello World!');
+	}
+}