Kopieren Sie alle Attribute von benutzerdefinierten Element in Vorlage in Aurelia

Question

Wenn Sie ein benutzerdefiniertes Element in Aurelia erstellen, gibt es eine Möglichkeit, alle zusätzlichen Attribute, die nicht gebunden sind, zu einem bestimmten Element in der Vorlage kopieren. Angenommen, ich erstelle ein benutzerdefiniertes Element namens "mein-benutzerdefiniertes-Element" mit einer bindbaren Eigenschaft namens "name".

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

Meine Vorlage folgendes wäre:

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

Was würde ich gemacht haben möchte, ist:

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

Also mit anderen Worten würde ich jede Zusatz-Attribut wie (s) das wird nicht von Aurelia eingegeben oder ist nicht an eine Eigenschaft gebunden, um für ein Element in meiner Vorlage verfügbar zu sein. Ich könnte eine bindbare Eigenschaft für die Klasse hinzufügen, weil das ziemlich üblich ist, etwas wie die "Daten-" Attribute könnten alles sein.

Ich würde auch gerne sehen, ob es das Containerless benutzerdefinierte Element unterstützt.

Answer 1

Es ist nur HTML, also könnten Sie wahrscheinlich das Element selbst in die VM für das benutzerdefinierte Element injizieren und dann das input Element referenzieren. Dann würden Sie einfache alte DOM-Methoden verwenden, um das benutzerdefinierte Element zu untersuchen. Es wäre wahrscheinlich ein bisschen spröde sein, aber so etwas wie das sollte unter arbeiten:

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); 
     } 
     } 
    } 
    } 
} 

ich ein lauffähiges Kern here erstellt haben.