2016-09-07 4 views
0

私はいくつかのコンポジションを作成しようとしていますが、私は何も期待していません。ほとんどすべての場合、私は同様のセットアップを試しました。私は何か違うものを得ました。間違っています。このGistRunは、少なくとも「何か」が間違っていることを示しています。アウレリア組成

composeの特定の機能と構文の詳細については高低を検索しましたが、問題を解決できないようです。

前述のGistRunでは、Container要素が正しくレンダリングされないことがわかります。h1はレンダリングされず、@containerlessは無視されています。

同様のシナリオでは、compose要素ではcontainerlessが無視されているため、レンダリングが無視され、名前付きスロットでは機能しませんでした。

私は何か間違っていると感じています。私はそれが何であるかは分かりません。誰かが私が間違っていることを知っているか、解決策を私に指摘することができれば、私はずっと義務づけられています。

答えて

4

あなたの期待はフレームワークの非常に古いバージョンに基づいていることが予想されるように機能しない理由の一部です。私はあなたの要点をここでJeremy DanyowのAureliaバンドルの最新バージョンに更新しました:https://gist.run/?id=1b304bb0c6dc98b23f4a3994acc280e4あなたの要点で使っていたフレームワークの古いバージョンでは、まだコンテンツ投影にcontent要素が使用されていました。

あなたの要点が実行されない理由はいくつかあります(私が上で述べたことを除いて)。まず、compose要素(および作成したカスタム要素)は自己終了しません。これは、カスタム要素仕様に従います。だから<compose view="test.html" />は役に立たない。第2に、コンテナレス要素がコンテンツ投影に使用されることに関する既存の問題がある。チームと話した後、コンテナレスのカスタム要素はShadow DOM v1仕様で実際にサポートされていないため、この問題は解決されません。 compose要素からcontainerless属性を削除すると、デモが機能します。最後に、あなたのapp.htmlファイルの先頭に<require from="container"></require>を追加するのを忘れました。したがって、Aureliaは<ck-container>がAureliaカスタム要素であることに気付かなかった。カスタム要素(またはその他のビューリソース)をグローバルに登録していない限り、使用するビューにはrequireを入力する必要があります。

次に、containerlessの使用について説明します。 containerlessデコレータと属性は単にHTMLを "クリーンアップ"するために使用すべきではありません。彼らはが絶対に必要であるときにのみあなたの目標を達成するためにを使用する必要があります。 「自分のHTMLをきれいにする」という言葉は決してではありません。containerlessを使用すると、標準カスタム要素として使用できないようなカスタム要素が作成されます。また、Aureliaチームは、必要がない限り、コンテナレスの要素を使用することをお勧めしません。

containerlessを使用するには、有効な理由の例は、ここで私たちのドキュメントにexpainedさ:http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/4

+0

は、あなたのコメントをありがとうございました。私は今、「容器なし」のより良い理解を持っています。私は実際にコードをクリーンアップするために使用していませんが、私はこれらの子をflexboxに動的に追加し、 'compose'要素は私に不快感を与えていました。登録について:私は 'index.html'を使って' .globalResources( 'container');でコンポーネントをグローバルに登録したと思っていた; self-closingについて:* slaps head *私はそれを知っていたアップ。答えをもう一度ありがとう、もし私が思考を働かせたら、私はそれを投稿します! –

+0

あなたは 'globalResources( 'container')'のことがまったく正しいです。古いバージョンのフレームワークを使用しているのを見ても、それを削除しました。申し訳ありません。 –

関連する問題