Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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 8c718e4
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 7 deletions.
30 changes: 26 additions & 4 deletions src/FooBar.Web/TagHelpers/AureliaEnhanceTagHelper.cs
Expand Up @@ -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;
Expand All @@ -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>");
}
}
}
}
5 changes: 4 additions & 1 deletion 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>
4 changes: 2 additions & 2 deletions src/FooBar.Web/app/core/aurelia-enhancer.ts
Expand Up @@ -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);
Expand Down
9 changes: 9 additions & 0 deletions 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!');
}
}

0 comments on commit 8c718e4

Please sign in to comment.