Permalink
Browse files

Using the MVC view model on the client with Aurelia bindings

  • Loading branch information...
deap82 committed May 20, 2017
1 parent 40f174f commit a0e90f0b3f9a944936398fb9b9e2971c2f0bff8b
@@ -1,4 +1,5 @@
using FooBar.Web.Core.Helpers;
using FooBar.Web.Core.Json;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
@@ -18,6 +19,10 @@ public class AureliaEnhanceTagHelper : TagHelper
[HtmlAttributeName(AuModuleAttributeName)]
public string Module { get; set; }
private const string AuDataAttributeName = "th-aurelia-enhance-data";
[HtmlAttributeName(AuDataAttributeName)]
public object Data { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
Enhance = !String.IsNullOrEmpty(Module);
@@ -40,11 +45,17 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
if(!String.IsNullOrEmpty(Module))
{
string jsonData = "{}";
if (Data != null)
{
jsonData = Data.ToJsonCamelCase();
}
output.PostElement.AppendHtml($@"
<script>
SystemJS.import('app/core/aurelia-enhancer').then(enhancer => {{
SystemJS.import('{Module}').then(module => {{
var clientModel = module.create();
var data = {jsonData};
var clientModel = module.create(data);
enhancer.enhance(clientModel, document.getElementById('{elementId}'));
}});
}});
@@ -4,17 +4,17 @@
@model FooBar.Web.Models.PersonModel
<div th-aurelia-enhance-module="app/views/home/home-person">
<div th-aurelia-enhance-module="app/views/home/home-person" th-aurelia-enhance-data="@Model">
<h1>Edit Person</h1>
<div class="form-group">
<label asp-for="FirstName"></label>
<input asp-for="FirstName" class="form-control" value.bind="firstName" />
<input asp-for="FirstName" class="form-control" value.bind="data.firstName" />
</div>
<div class="form-group">
<label asp-for="LastName"></label>
<input asp-for="LastName" class="form-control" value.bind="lastName" />
<input asp-for="LastName" class="form-control" value.bind="data.lastName" />
</div>
<div class="form-group">
@@ -29,7 +29,7 @@
<div class="form-group">
<label asp-for="Age"></label>
<input asp-for="Age" class="form-control" value.bind="age" />
<input asp-for="Age" class="form-control" value.bind="data.age" />
</div>
<div class="form-group">
@@ -1,11 +1,13 @@
export function create() {
return new HomePersonClientModel();
export function create(data: any) {
return new HomePersonClientModel(data);
}
class HomePersonClientModel {
data: any;
currentYear: number;
constructor() {
constructor(data: any) {
this.data = data;
this.currentYear = new Date().getFullYear();
}
}

0 comments on commit a0e90f0

Please sign in to comment.