1

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

<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-”属性可以是任何东西。

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

4

1 回答 1

0

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

我在这里创建了一个可运行的要点。

于 2017-07-21T01:37:41.773 回答