1

When you are creating a custom element in Aurelia, is there a way to take all of the extra attributes that aren't bound and copy them to a specific element inside the template. For example, say I create a custom element called "my-custom-element" with a bindable property called "name".

<my-custom-element name="MyName" class="my-class" data-id="1" />

My template would be the following:

<template>
    <input name.bind="name" type="text" />
</template>

What I would like to have rendered is:

<input name="MyName" class="my-class" data-id="1" />

So in other words I would like any addition attribute(s) that isn't put in by Aurelia or isn't bound to a property to be available for me add to an element in my template. I could add a bindable property for class because that is pretty common, something like the "data-" attributes could be anything.

I would also like to see if it can support the a containerless custom element.

Fabio
  • 11,892
  • 1
  • 25
  • 41
John White
  • 19
  • 3

1 Answers1

0

It's just HTML, so you could probably inject the element itself in to the VM for the custom element, and then ref the input element. Then you'd use plain old DOM methods to inspect the custom element. It'd probably be a bit brittle, but something like the below should work:

import {inject, customElement, bindable} from 'aurelia-framework';

@customElement('my-custom-element')
@inject(Element)
export class MyCustomElement {
  @bindable name;

  constructor(el) {
    this.el = el;
  }

  attached() {
    const attributes = this.el.attributes;

    for( const attr of attributes ) {
      let {name, value} = attr;

      if(name != 'au-target-id') {
        const dotLocation = name.indexOf('.');

        if( dotLocation > -1 ) {
          name = name.substring(0, dotLocation);
        }

        if(name !== 'name') {
          this.myInput.setAttribute(name,value);
        }
      }
    }
  } 
}

I've created a runnable gist here.

Ashley Grant
  • 10,879
  • 24
  • 36
  • Thanks! This is pretty close. If I make it containerless, it no longer works. Is there a way to support a containerless custom element? – John White Jul 21 '17 at 01:49
  • I doubt it, but honestly I think people overuse containerless. It should only be used if it is ABSOLUTELY necessary. – Ashley Grant Jul 21 '17 at 01:52
  • Yea, I get what you are saying. The reason I ask is because those same attributes will exist on the root element. So anyone who is writing javascript or css looking for specific attributes will have to know to specify the specific template element. So in the example I gave it has a css class. If I just add a style for .my-class it will associate that style to both elements. – John White Jul 21 '17 at 01:56
  • Change your css – Ashley Grant Jul 21 '17 at 01:57
  • Yea, that is an option. I was just hoping we wouldn't have to do that. :) – John White Jul 21 '17 at 12:36
  • I'll give you the advice that a wise senior dev gave me when I was a junior dev: "If you're doing something and it starts to become overly difficult, maybe you should take a step back and figure out if your entire approach is wrong. Because it probably is." – Ashley Grant Jul 21 '17 at 13:30