How to Inject/Replace part of the view and view model in Aurelia

Question

I'm migrating from KnockoutJS to Aurelia and having a hard time trying to figure out how I can swap out some HTML/JS from a view. I have some existing Knockout code as follows:

$.ajax({
    url: "/admin/configuration/settings/get-editor-ui/" + replaceAll(self.type(), ".", "-"),
    type: "GET",
    dataType: "json",
    async: false
})
.done(function (json) {

    // Clean up from previously injected html/scripts
    if (typeof cleanUp == 'function') {
        cleanUp(self);
    }

    // Remove Old Scripts
    var oldScripts = $('script[data-settings-script="true"]');

    if (oldScripts.length > 0) {
        $.each(oldScripts, function () {
            $(this).remove();
        });
    }

    var elementToBind = $("#form-section")[0];
    ko.cleanNode(elementToBind);

    var result = $(json.content);

    // Add new HTML
    var content = $(result.filter('#settings-content')[0]);
    var details = $('<div>').append(content.clone()).html();
    $("#settings-details").html(details);

    // Add new Scripts
    var scripts = result.filter('script');

    $.each(scripts, function () {
        var script = $(this);
        script.attr("data-settings-script", "true");//for some reason, .data("block-script", "true") doesn't work here
        script.appendTo('body');
    });

    // Update Bindings
    // Ensure the function exists before calling it...
    if (typeof updateModel == 'function') {
        var data = ko.toJS(ko.mapping.fromJSON(self.value()));
        updateModel(self, data);
        ko.applyBindings(self, elementToBind);
    }

    //self.validator.resetForm();
    switchSection($("#form-section"));
})
.fail(function (jqXHR, textStatus, errorThrown) {
    $.notify(self.translations.getRecordError, "error");
    console.log(textStatus + ': ' + errorThrown);
});

In the above code, the self.type() being passed to the url for an AJAX request is the name of some settings. Here is an example of some settings:

public class DateTimeSettings : ISettings
{
    public string DefaultTimeZoneId { get; set; }

    public bool AllowUsersToSetTimeZone { get; set; }

    #region ISettings Members

    public string Name => "Date/Time Settings";

    public string EditorTemplatePath => "Framework.Web.Views.Shared.EditorTemplates.DateTimeSettings.cshtml";

    #endregion ISettings Members
}

I use that EditorTemplatePath property to render that view and return it in the AJAX request. An example settings view is as follows:

@using Framework.Web
@using Framework.Web.Configuration
@inject Microsoft.Extensions.Localization.IStringLocalizer T

@model DateTimeSettings

<div id="settings-content">
    <div class="form-group">
        @Html.LabelFor(m => m.DefaultTimeZoneId)
        @Html.TextBoxFor(m => m.DefaultTimeZoneId, new { @class = "form-control", data_bind = "value: defaultTimeZoneId" })
        @Html.ValidationMessageFor(m => m.DefaultTimeZoneId)
    </div>
    <div class="checkbox">
        <label>
            @Html.CheckBoxFor(m => m.AllowUsersToSetTimeZone, new { data_bind = "checked: allowUsersToSetTimeZone" }) @T[FrameworkWebLocalizableStrings.Settings.DateTime.AllowUsersToSetTimeZone]
        </label>
    </div>
</div>

<script type="text/javascript">
    function updateModel(viewModel, data) {
        viewModel.defaultTimeZoneId = ko.observable("");
        viewModel.allowUsersToSetTimeZone = ko.observable(false);

        if (data) {
            if (data.DefaultTimeZoneId) {
                viewModel.defaultTimeZoneId(data.DefaultTimeZoneId);
            }
            if (data.AllowUsersToSetTimeZone) {
                viewModel.allowUsersToSetTimeZone(data.AllowUsersToSetTimeZone);
            }
        }
    };

    function cleanUp(viewModel) {
        delete viewModel.defaultTimeZoneId;
        delete viewModel.allowUsersToSetTimeZone;
    }

    function onBeforeSave(viewModel) {
        var data = {
            DefaultTimeZoneId: viewModel.defaultTimeZoneId(),
            AllowUsersToSetTimeZone: viewModel.allowUsersToSetTimeZone()
        };

        viewModel.value(ko.mapping.toJSON(data));
    };
</script>

Now if you go back to the AJAX request and see what I am doing there, it should make more sense. There is a <div> where I am injecting this HTML, as follows:

<div id="settings-details"></div>

I am trying to figure out how to do this in Aurelia. I see that I can use Aurelia's templatingEngine.enhance({ element: elementToBind, bindingContext: this }); instead of Knockout's ko.applyBindings(self, elementToBind); so I think that should bind the new properties to the view model. However, I don't know what to do about the scripts from the settings editor templates. I suppose I can try keeping the same logic I already have (using jQuery to add/remove scripts, etc)... but I am hoping there is a cleaner/more elegant solution to this with Aurelia. I looked at slots, but I don't think that's applicable here, though I may be wrong.

Answer 1

As discussed in the comments, my answer to your other question should do the trick here. Given this runtime-view element:

TypeScript

    import { bindingMode, createOverrideContext } from "aurelia-binding";
    import { Container } from "aurelia-dependency-injection";
    import { TaskQueue } from "aurelia-task-queue";
    import { bindable, customElement, inlineView, ViewCompiler, ViewResources, ViewSlot } from "aurelia-templating";
    
    @customElement("runtime-view")
    @inlineView("<template><div></div></template>")
    export class RuntimeView {
      @bindable({ defaultBindingMode: bindingMode.toView })
      public html: string;
    
      @bindable({ defaultBindingMode: bindingMode.toView })
      public context: any;
    
      public el: HTMLElement;
      public slot: ViewSlot;
      public bindingContext: any;
      public overrideContext: any;
      public isAttached: boolean;
      public isRendered: boolean;
      public needsRender: boolean;
    
      private tq: TaskQueue;
      private container: Container;
      private viewCompiler: ViewCompiler;
    
      constructor(el: Element, tq: TaskQueue, container: Container, viewCompiler: ViewCompiler) {
        this.el = el as HTMLElement;
        this.tq = tq;
        this.container = container;
        this.viewCompiler = viewCompiler;
        this.slot = this.bindingContext = this.overrideContext = null;
        this.isAttached = this.isRendered = this.needsRender = false;
      }
    
      public bind(bindingContext: any, overrideContext: any): void {
        this.bindingContext = this.context || bindingContext.context || bindingContext;
        this.overrideContext = createOverrideContext(this.bindingContext, overrideContext);
    
        this.htmlChanged();
      }
    
      public unbind(): void {
        this.bindingContext = null;
        this.overrideContext = null;
      }
    
      public attached(): void {
        this.slot = new ViewSlot(this.el.firstElementChild || this.el, true);
        this.isAttached = true;
    
        this.tq.queueMicroTask(() => {
          this.tryRender();
        });
      }
    
      public detached(): void {
        this.isAttached = false;
    
        if (this.isRendered) {
          this.cleanUp();
        }
        this.slot = null;
      }
    
      private htmlChanged(): void {
        this.tq.queueMicroTask(() => {
          this.tryRender();
        });
      }
    
      private contextChanged(): void {
        this.tq.queueMicroTask(() => {
          this.tryRender();
        });
      }
    
      private tryRender(): void {
        if (this.isAttached) {
          if (this.isRendered) {
            this.cleanUp();
          }
          try {
            this.tq.queueMicroTask(() => {
              this.render();
            });
          } catch (e) {
            this.tq.queueMicroTask(() => {
              this.render(`<template>${e.message}</template>`);
            });
          }
        }
      }
    
      private cleanUp(): void {
        try {
          this.slot.detached();
        } catch (e) {}
        try {
          this.slot.unbind();
        } catch (e) {}
        try {
          this.slot.removeAll();
        } catch (e) {}
    
        this.isRendered = false;
      }
    
      private render(message?: string): void {
        if (this.isRendered) {
          this.cleanUp();
        }
    
        const template = `<template>${message || this.html}</template>`;
        const viewResources = this.container.get(ViewResources) as ViewResources;
        const childContainer = this.container.createChild();
        const factory = this.viewCompiler.compile(template, viewResources);
        const view = factory.create(childContainer);
    
        this.slot.add(view);
        this.slot.bind(this.bindingContext, this.overrideContext);
        this.slot.attached();
    
        this.isRendered = true;
      }
    }

ES6

    import { bindingMode, createOverrideContext } from "aurelia-binding";
    import { Container } from "aurelia-dependency-injection";
    import { TaskQueue } from "aurelia-task-queue";
    import { DOM } from "aurelia-pal";
    import { bindable, customElement, inlineView, ViewCompiler, ViewResources, ViewSlot } from "aurelia-templating";
    
    @customElement("runtime-view")
    @inlineView("<template><div></div></template>")
    @inject(DOM.Element, TaskQueue, Container, ViewCompiler)
    export class RuntimeView {
      @bindable({ defaultBindingMode: bindingMode.toView }) html;
      @bindable({ defaultBindingMode: bindingMode.toView }) context;
    
      constructor(el, tq, container, viewCompiler) {
        this.el = el;
        this.tq = tq;
        this.container = container;
        this.viewCompiler = viewCompiler;
        this.slot = this.bindingContext = this.overrideContext = null;
        this.isAttached = this.isRendered = this.needsRender = false;
      }
    
      bind(bindingContext, overrideContext) {
        this.bindingContext = this.context || bindingContext.context || bindingContext;
        this.overrideContext = createOverrideContext(this.bindingContext, overrideContext);
    
        this.htmlChanged();
      }
    
      unbind() {
        this.bindingContext = null;
        this.overrideContext = null;
      }
    
      attached() {
        this.slot = new ViewSlot(this.el.firstElementChild || this.el, true);
        this.isAttached = true;
    
        this.tq.queueMicroTask(() => {
          this.tryRender();
        });
      }
    
      detached() {
        this.isAttached = false;
    
        if (this.isRendered) {
          this.cleanUp();
        }
        this.slot = null;
      }
    
      htmlChanged() {
        this.tq.queueMicroTask(() => {
          this.tryRender();
        });
      }
    
      contextChanged() {
        this.tq.queueMicroTask(() => {
          this.tryRender();
        });
      }
    
      tryRender() {
        if (this.isAttached) {
          if (this.isRendered) {
            this.cleanUp();
          }
          try {
            this.tq.queueMicroTask(() => {
              this.render();
            });
          } catch (e) {
            this.tq.queueMicroTask(() => {
              this.render(`<template>${e.message}</template>`);
            });
          }
        }
      }
    
      cleanUp() {
        try {
          this.slot.detached();
        } catch (e) {}
        try {
          this.slot.unbind();
        } catch (e) {}
        try {
          this.slot.removeAll();
        } catch (e) {}
    
        this.isRendered = false;
      }
    
      render(message) {
        if (this.isRendered) {
          this.cleanUp();
        }
    
        const template = `<template>${message || this.html}</template>`;
        const viewResources = this.container.get(ViewResources);
        const childContainer = this.container.createChild();
        const factory = this.viewCompiler.compile(template, viewResources);
        const view = factory.create(childContainer);
    
        this.slot.add(view);
        this.slot.bind(this.bindingContext, this.overrideContext);
        this.slot.attached();
    
        this.isRendered = true;
      }
    }

Here are some ways in which you can use it:

dynamicHtml is a property on the ViewModel containing arbitrary generated html with any kind of bindings, custom elements and other aurelia behaviors in it.

It will compile this html and bind to the bindingContext it receives in bind() - which will be the viewModel of the view in which you declare it.

<runtime-view html.bind="dynamicHtml">
</runtime-view>

Given a someObject in a view model:

this.someObject.foo = "bar";

And a dynamicHtml like so:

this.dynamicHtml = "<div>${foo}</div>";

This will render as you'd expect it to in a normal Aurelia view:

<runtime-view html.bind="dynamicHtml" context.bind="someObject">
</runtime-view>

Re-assigning either html or context will trigger it to re-compile. Just to give you an idea of possible use cases, I'm using this in a project with the monaco editor to dynamically create Aurelia components from within the Aurelia app itself, and this element will give a live preview (next to the editor) and also compile+render the stored html/js/json when I use it elsewhere in the application.