1

aurelia コンポーネントにコンテナレス機能を使用すると、奇妙な動作が見られます。SVG コンテナ内でカスタム要素を作成していますが、SVG コンテナ内では SVGElements タグのみが許可されているため、DOM に追加する前にコンテナレス タグを使用してカスタム要素タグを削除する必要がありました。Aurelia リリース バージョン 1.0.0 を使用しており、webpack で SPA をビルドしています。

ここでは、コンテナレス使用の 2 つの実装を表示する gistrun の例を見つけることができます。 https://gist.run/?id=58ba6282ad54c1263eec3a141fe42183

この例では、2 つのビューモデルを作成し、これをカスタム要素にバインドしています。as-element="compose"ビューモデルを作成したこと、および Aurelia が VM を作成してはならないことを aurelia に伝えるために使用します。これらとカスタム要素の違いは、コンテナレス タグです。

  1. CustomElement は Viewmodel に@containerlessタグを持っていませんが、HTML ビューに「コンテナレス」を持っています。

  2. @containerlessAurelia HUB で説明されているように、withattr コンポーネントには HTML ビューに「コンテナレス」がありませんが、Viewmodel にはタグがあります。

どちらの状況でも、青い四角形が表示されると思います。customelement タグは、コンテナレス タグのため、Aurelia によって削除されます。ただし、@containerless実装 2 のように、タグは機能していないようです。

質問: これらの実装の出力が異なる理由の手がかりはありますか? どれが正しいですか？@containerlessタグをビューモデルに配置する必要があるとAurelia Docsに記載されているように、2が予想されます。

どんな助けでも大歓迎です:)

4

1 に答える 1

0

@containerlessデコレータは、配置した要素に直接作用します。

何が起こっているかというと、デコレータが要素に適用されますwithattrが、それをフードの下の要素にas-element="compose"変えます。composeこの要素にはタグが適用されてcomposeいません。@containerless

同様に、customelementあなたは実際には に適用@containerlessされているのではcustomelementなく、composeそれが変化した に適用されています。

部分を削除し、マークアップで要素を裸でas-element="compose"宣言するだけで、実際の要素がまだ.<withattr/>containerlesswithattr

要素内でカスタム要素を使用する場合のように、他に何かを達成する方法がない場合を除き、@containerlesswithの使用は推奨されないことに注意してください。as-elementtable

単純にカスタム要素のcompose内部に配置し、カスタム要素のバインド可能なプロパティを介してビューへのパスをバインドしてみませんか?

編集

申し訳ありませんが、独自の ViewModel インスタンスを指定したかったという事実を見落としていました。

composeAurelia が独自の ViewModel インスタンスの提供をサポートする唯一の方法であるため、この要件により要素の使用が制限されます。

が必要なことも確かです@containerless。@containerlessそして、それが要素上にある必要がありますcompose。

結論として、最初のソリューションは技術的な観点からは完全に問題ないようです。

個人的な好みの問題として、私はこれを行います：

<compose containerless view.bind="'./customelement.html'" view-model.bind="customElementViewModel"/>

これの代わりに：

<customelement containerless as-element="compose" view-model.bind="customElementViewModel"/>

動的ビューをもう少し柔軟にするために、 を使用していて、ビューを使用するcompose必要がないことを明確に<require>します。しかし、それは実際には好みやその他の要件に要約されます。

于 2016-09-27T15:20:42.697 に答える