将自定义元素中的所有属性复制到Aurelia中的模板中

在Aurelia中创建自定义元素时，是否有方法获取所有未绑定的额外属性并将其复制到模板中的特定元素。例如，假设我创建了一个名为“my custom element”的自定义元素，其中包含一个名为“name”的可绑定属性

我的模板如下所示：

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

我想要呈现的是：

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

因此，换句话说，我希望Aurelia未放入或未绑定到属性的任何添加属性都可以添加到模板中的元素中。我可以为类添加一个可绑定属性，因为这是非常常见的，类似“data-”属性的东西可以是任何东西

---

我还想看看它是否可以支持无容器自定义元素。

它只是HTML，因此您可能可以将该元素本身注入到自定义元素的VM中，然后引用

输入

元素。然后使用普通的DOM方法检查自定义元素。这可能有点脆，但下面的方法应该可以：

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

---

我已经创建了一个可运行的要点

它只是HTML，因此您可能会将元素本身注入到定制元素的VM中，然后引用

input

元素。然后使用普通的DOM方法检查自定义元素。这可能有点脆，但下面的方法应该可以：

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

---

我已经创建了一个可运行的要点

谢谢！这很接近。如果我把它变成无容器的，它就不工作了。有没有办法支持无容器定制元素？我对此表示怀疑，但老实说，我认为人们过度使用了无容器。只有在绝对必要的情况下才可以使用。是的，我明白你的意思。我之所以问这个问题，是因为这些相同的属性将存在于根元素上。因此，任何编写javascript或css寻找特定属性的人都必须知道如何指定特定的模板元素。所以在我给出的示例中，它有一个css类。如果我只是为我的类添加一个样式，它会将该样式与这两个元素相关联。更改css是的，这是一个选项。我只是希望我们不必那样做谢谢这很接近。如果我把它变成无容器的，它就不工作了。有没有办法支持无容器定制元素？我对此表示怀疑，但老实说，我认为人们过度使用了无容器。只有在绝对必要的情况下才可以使用。是的，我明白你的意思。我之所以问这个问题，是因为这些相同的属性将存在于根元素上。因此，任何编写javascript或css寻找特定属性的人都必须知道如何指定特定的模板元素。所以在我给出的示例中，它有一个css类。如果我只是为我的类添加一个样式，它会将该样式与这两个元素相关联。更改css是的，这是一个选项。我只是希望我们不必那样做