Rendering aurelia template into non-aurelia html element in the context of an existing custom element

Help Requests
1

I am trying to create a custom element that uses a non-aurelia external library for rendering that can be used as follows:

<require from="someValueConverter"></require>
<require from="someCustomElement"></require>
<example-grid>
  <example-grid-column>
    ${foo | someConverter}
  </example-grid-column>
  <example-grid-column>
    <some-element></some-element>
  </example-grid-column>
</example-grid>

The external library renders it’s grid into an existing element and has a callback for rendering the cell content that has to return an html element. So i did something like this:

// example-grid.ts
@processContent((compiler, resources, element) => {
  element.querySelectorAll("example-grid-column").forEach(column => {
    // column.innerHTML is extracted so i can access it from the element instance.
  });
  return false;
})
export class ExampleGrid {
  private host: HTMLElement;

  attached() {
    this.grid = someExternalLibrary({
      host: this.host
      renderCell() {
        const cell = document.createElement("div");
        // I somehow need to render the extracted innerHTML from above into the element
        // so that things inside the template are able to access required elements/value-converters
        // that are required in the view where <example-grid> is used.
        return cell;
      }
    });
  }

  detached() {
    this.grid.destroy();
  }
}

<!-- example-grid.html -->
<template>
  <div ref="host"></div>
</template>

Currently i am using a ViewSlot for rendering the template part, but i think there might be a much simpler way:

const cell = document.createElement("div");
const slot = new ViewSlot(cell, true);
compositionEngine.compose({
  bindingContext: parentBindingContext,
  childContainer: exampleGridElementContainer.createChild(),
  container: exampleGridElementContainer,
  host: cell,
  model: null,
  overrideContext: { someAdditionalDataThatHasToBeAvailableInTheTemplatePart },
  view: new StaticViewStrategy(`<template>${templatePartToRender}</template>`),
  viewResources: exampleGridElementContainer.get(ViewResources),
  viewSlot: slot
});
return cell;

This approach works fine except that the <require>s from the parent view are not effective
for things inside the view slot altough i passed the correct viewResources instance to the
compose call.

Is there another way of rendering an aurelia template (as string or html-fragment) into a non-aurelia html element instance in the context of an existing custom element instance?

Thanks in advance

1 Like
2

@mxjp for the resources from parent view are not effective, what is parent and what is child?

3

This would be the parent view:

<template>
  <require from="someCustomElement"></require>

  <!-- works here: -->
  <some-custom-element></some-custom-element>

  <example-grid>
    <example-grid-column>
      <!-- does not work here: -->
      <some-custom-element></some-custom-element>
    </example-grid-column>
  </example-grid>
</template>

The required <some-custom-element> is not found when rendered via the view slot. I noticed that the ViewResources instance i pass to the view slot is the one that is auto injected into the <example-grid> vm and not the one from the parent view.

Is there a reliable way to get the view resources from the parent view (the one that <example-grid> is used in) without direct access to the container of the parent template?