VMで 'コンテナレス'を使用した場合とカスタム要素でHTMLビューで 'コンテナレス'を使用した場合の違い

Question

アウレリアコンポーネントにコンテナレス機能を使用すると、奇妙な動作が見られます。私たちはSVGコンテナ内にカスタム要素を作成しています。SVGコンテナ内でSVGElementsタグだけが許可されているため、コンテナレスタグを使用してカスタム要素タグをDOMに追加する必要がありました。 Aureliaリリース1.0.0を使用しており、webpackでSPAを構築しています。

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

この例では、2つのビューモデルを作成し、カスタム要素にバインドしました。 as-element="compose"を使用して、私がviewmodelを作成し、AureliaがVMを作成すべきではないことをaureliaに伝えます。 ViewModelにで@containerlessタグを持っていますが、HTMLビューで「無容器」を持っているdoesntの

1. CustomElement：カスタム要素にこれらの違いは、コンテナのないタグです。

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

私は両方の状況で青い矩形が表示されると予想しています。 customelementタグは、コンテナレスタグのためAureliaによって削除されます。しかし@containerlessタグdoesntのは、実装にと、動作しているようです。2.

質問：これらの実装が異なる出力を持っている理由 任意の手掛かり？ どちらが正しいですか？ Aurelia Docsに記載されているように、@containerlessタグをviewmodelに配置する必要があります。

任意の助けいただければ幸い:)

Answer 1

@containerlessデコレータは、あなたがそれを上に置く要素で直接動作します。

デコレータがwithattr要素に適用されていますが、as-element="compose"はフードの下のcompose要素になります。このcompose要素には、@containerlessタグが適用されていません。

同様に、お客様のcustomelementでは、実際に@containerlessはcustomelementに適用されていませんが、composeに変更されています。

as-element="compose"一部を削除し、単にマークアップであなたの<withattr/>要素は裸宣言し、実際の要素がまだwithattrになりますので、containerlessは動作します。

要素内のカスタム要素を使用する場合のように、何か他の方法がない限り、には@containerlessを使用することはお勧めできません。

カスタム要素内にcomposeがあり、カスタム要素のバインド可能なプロパティを介してビューにパスをバインドしていないのはなぜですか？

EDIT

は申し訳ありませんが、私は一種のあなたがあなた自身のViewModelのインスタンスを指定したかったという事実を見落とし。

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

@containerlessも必要です。そして、@containerlessがcompose要素にあることが必要です。

結論として、最初の解決策は技術的な観点からは完璧に見えます。それを作る、ダイナミックな景色を眺めながら、もう少し柔軟に

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

：この代わりの

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

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

を行うだろう我々はcomposeを使用していることを明確にし、<require>のビューを持たない。しかし、それは本当に嗜好やその他の要件に沸きます。