Load resources for TemplatingEngine.enhance

1

Hey guys,

We have quite a few situations where we need to enhance stuff in order to use our UI framework (Syncfusion).
We normally load those resources in main.ts, on app’s initialization.

I’d like to know if we have a way of loading those resources where/when I need to use them, and pass them to the enhance method:

templatingEngine.enhance({
        element: document.querySelector('my-component'),
        resources: a.resources <-- tadaa!!
      });

In the same way, I’d like to know if I can load a value converter of mine and use it in the template that I’ll enhance after:

this.listItemTemplate = `
   ...
   <div class="detail">\${assignedHours | myValueConverter}</div>
   ...
`

Thanks in advance!

1 Like
2

Very good question. I’m also interested in the answer. @EisenbergEffect can probably tell us! Thank you!

2 Likes
3

Something like this should work:

 let resources = await this.viewEngine.importViewResources(
      ["./resources/value-converters/my-value-converter"],
		["my-value-converter"],
      this.aurelia.resources,
	);
	  this.templatingEngine.enhance({
		  element: document.querySelector('my-component'),
		  bindingContext: this,
		  resources: resources
	  })
2 Likes
4

If you are doing this in a custom element, or a custom attribute, then you have an options to inject the resources associated with that custom element/custom attribute:

@inject(Element, TemplatingEngine, ViewResources)
export class MyClass {
  constructor(host, globalTemplatingEngine, localViewResources) {
    
  }

  enhance() {
    const view = templatingEngine.enhance({
      element: host,
      resources: this.localViewResources <-- tadaa!!
    });
  }
}
2 Likes
5

Hi you all,
I didn’t have the time to check just yet, I’ll let you guys know if it works here as soon as I can.

Thank you !

1 Like