Question

当您在Aurelia中创建自定义元素时，是否有办法获取未绑定的所有额外属性并将它们复制到模板内的特定元素。例如，假设我使用名为“name”的可绑定属性创建名为“my-custom-element”的自定义元素。

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

我的模板如下：

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

我想要呈现的是：

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

所以换句话说，我想要任何未被Aurelia放入的附加属性，或者没有绑定到我可以添加到模板中的元素的属性。我可以为类添加一个可绑定属性，因为这很常见，类似于“data-”属性可能是任何东西。

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

Answer 1

它只是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);
        }
      }
    }
  } 
}

我创建了一个可运行的要点here。

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

1 个答案: