setAttributeメソッドを使用したAureliaカスタム属性

Question

Aureliaは、javascriptで要素を作成して追加し、カスタム属性を設定するときに（私が間違っていない限り）認識していないようです。たとえば、

const e = document.createElement('div'); 
e.setAttribute('custom-attr', 'some value'); 
body.appendChild(e); 

このカスタム属性が追加されると、Aureliaに認識させる方法はありますか？

少し背景：私はユーザーが要素の種類（入力、選択、チェックボックスなど）を選択してドラッグすることができます（ドラッグはカスタム属性で行われます）。私はラッパーを作成することを考えました<div custom-attr repeat.for="e of elements"></div>何とか要素の配列をレンダリングしますが、これは、リピーターが新しい要素を押すたびにすべての要素を通過するので、非効率的なように見えました。テキスト入力が作成される可能性があります。

Answer 1

Aureliaのenhanceメソッドを手動で起動して、カスタム属性やAurelia関連のものを実際に登録する必要があります。また、カスタム属性を含むViewResourcesオブジェクトを渡す必要があります。

---

これは思ったほど単純ではないので、少し説明します。プレーンテキストとしてあなたのHTML（文字列）

バインディングコンテキスト（このシナリオでは、それだけでthisです）

A ViewResourcesオブジェクト

• ：

  向上させる方法は、このシナリオのために、次のパラメータが必要です必要なカスタム属性を持っている

私たちの要件を満たすViewResourcesオブジェクトにアクセスする方法の1つはですカスタム属性を親ビューに追加し、親ビューのViewResourcesを使用します。これを行うには、親ビューのHTML内のビューをrequireにしてから、コントローラーにcreated(owningView, thisView)コールバックを実装します。呼び出されると、thisViewはresourcesプロパティを持ちます。これはrequire -dカスタム属性を含むViewResourcesオブジェクトです。

私は説明が面白いので、下記の例を見てください。ここで

---

はどのように例を示します。

app.js

import { TemplatingEngine } from 'aurelia-framework'; 

export class App { 
    static inject = [TemplatingEngine]; 

    message = 'Hello World!'; 

    constructor(templatingEngine, viewResources) { 
    this._templatingEngine = templatingEngine; 
    } 

    created(owningView, thisView) { 
    this._viewResources = thisView.resources; 
    } 

    bind() { 
    this.createEnhanceAppend(); 
    } 

    createEnhanceAppend() { 
    const span = document.createElement('span'); 
    span.innerHTML = "<h5 example.bind=\"message\"></h5>"; 
    this._templatingEngine.enhance({ element: span, bindingContext: this, resources: this._viewResources }); 
    this.view.appendChild(span); 
    } 
} 

app.html

<template> 
    <require from="./example-custom-attribute"></require> 

    <div ref="view"></div> 
</template> 

---

Gist。実行：

https://gist.run/?id=7b80d2498ed17bcb88f17b17c6f73fb9

---

追加リソース

ドウェインCharringtonはこのトピックに関する優れたチュートリアルを書いてい

：そのリソースの

https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/