カスタム要素のすべての属性をAureliaのテンプレートにコピー

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によって入れられていないか、私のテンプレートの要素に追加できるプロパティにバインドされていません。クラスのためにバインド可能なプロパティを追加することができます。これはかなり一般的です。「データ」属性のようなものは何でもかまいません。

コンテナレスのカスタム要素をサポートできるかどうかを確認したいと思います。

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を作成しました。