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!');
	}
}