Permalink
Browse files

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

…he server side rendered razor view
  • Loading branch information...
deap82 committed May 7, 2017
1 parent 5ee9d0e commit 8c718e4b82a8362f87117c455e495eb26253f67d
@@ -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>");
}
}
}
}
@@ -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>
@@ -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);
@@ -0,0 +1,9 @@
export function create() {
return new HomeAboutClientModel();
}
class HomeAboutClientModel {
showMessage() {
alert('Hello World!');
}
}

0 comments on commit 8c718e4

Please sign in to comment.