Aurelia Custom Attribute with setAttribute method()

Question

It seems Aurelia is not aware when I create and append an element in javascript and set a custom attribute (unless I am doing something wrong). For example,

con         


        

Answer 1

You would have to manually trigger the Aurelia's enhance method for it to register the custom attributes or anything Aurelia related really. And you also have to pass in a ViewResources object containing the custom attribute.

---

Since this isn't as straight forward as you might think, I'll explain it a bit.

The enhance method requires the following parameters for this scenario:

• Your HTML as plain text (string)
• The binding context (in our scenario, it's just this)
• A ViewResources object that has the required custom attribute

One way to get access to the ViewResources object that meets our requirements, is to require the custom attribute into your parent view and then use the parent view's ViewResources. To do that, require the view inside the parent view's HTML and then implement the created(owningView, thisView) callback in the controller. When it's fired, thisView will have a resources property, which is a ViewResources object that contains the require-d custom attribute.

Since I am HORRIBLE at explaining, please look into the example provided below.

---

Here is an example how to:

app.js

import { TemplatingEngine } from 'aurelia-framework';

export class App {
  static inject = [TemplatingEngine];

  message = 'Hello World!';

  constructor(templatingEngine, viewResources) {
    this._templatingEngine = templatingEngine;
  }

  created(owningView, thisView) {
    this._viewResources = thisView.resources;
  }

  bind() {
    this.createEnhanceAppend();
  }

  createEnhanceAppend() {
    const span = document.createElement('span');
    span.innerHTML = "<h5 example.bind=\"message\"></h5>";
    this._templatingEngine.enhance({ element: span, bindingContext: this, resources: this._viewResources });
    this.view.appendChild(span);
  }
}

app.html

<template>
  <require from="./example-custom-attribute"></require>

  <div ref="view"></div>
</template>

---

Gist.run:

https://gist.run/?id=7b80d2498ed17bcb88f17b17c6f73fb9

---

Additional resources

Dwayne Charrington has written an excellent tutorial on this topic:

https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/