問題タブ [aurelia-templating]

コンポーネント用itemsに定義されたプロパティを持つカスタム コンポーネントがあります。@children

tracker-item@noViewは注釈付きの単純なビューモデルであり、プロパティは 1 つだけです。

私のビューでは、アイテムは次のように定義されています。

これは完全に機能しましたが、aurelia-cli でビルドするためにプロジェクトを更新した後、コンポーネントが呼び出されるたびに次のエラーが表示されます。

TrackerComponent は、私のカスタム コンポーネントの名前です。

コードのどこかで、同じエラーを発生させない別のカスタムコンポーネントに対して同じ定義を持っているため、そのエラーがどこから来たのかわかりません。

これの何が問題なのですか？

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が予想されます。

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

次のように、同じファイルで定義されたテンプレートを作成することは可能ですか。それとも、構成されたテンプレートを別のファイルに含める必要がありますか?

repeat.for でこれら 2 つのオプションの間にパフォーマンスまたは効率の違いはありますか?

オプション 1: インライン要素

オプション 2: カスタム ビュー要素

ビュー要素は次のとおりです。

view-element.js

ビュー要素.html

ビュー要素に多くのバインディングが含まれている場合、違いはありますか?

repeat.for基本的に、すべてのメッセージをループし、 を使用してメッセージ ビューをレンダリングする で構成される、いわゆるチャット ビューがあります<compose>。

問題は、メッセージ数が 50 を超え、ユーザーがチャット間を移動すると、非常に遅くなることです ( repeat.forVM のデータセットを置き換えると、更新がトリガーされます)。

このようなビューの処理に関して、何か間違ったことをしているように感じます。他の代替案に関する情報を得ることができますか?

UI の仮想化を試してみましたが、残念ながら現在のプラグインは必要な機能 (可変高さのアイテム、ボトムアップの配置) をサポートしていません。

また、バインディングに関してかなりの最適化を行いました。ほとんどは 1 回限りであり、データセットへの更新はデバウンスされます。しかし、主なボトルネックは初期ロード (最初にビューをバインドする) であるため、これでは改善されませんでした。

ありがとう！

現在のアプローチの例:

私は w2ui グリッドを使用しており、テンプレート列は次のように生成されます。

ご覧のように poker-card はカスタム属性です。グリッドにレンダリングされません。その他の方法で？

IE10/11 にはいくつかのパフォーマンスの問題があります。次の plunker は、カスタム要素でテーブルの行を繰り返しているときのパフォーマンスの低下の一部を説明しています。

プランカーの例

このプランカーの例では、テーブル全体をレンダリングするためにクロムで合計 68 ミリ秒を取得します。IE11 では 280 ミリ秒になり、行ごとのレンダリング速度が 100% 向上します。Chrome は 1 ミリ秒あたり最大 3 行を処理しますが、IE は 2 ミリ秒ごとに 1 行を処理します。

この plunkr は、アプリケーションの基本モデルです。私たちのアプリケーションでは、かなり重い次のテンプレートを繰り返します。これには、ユーザーの設定と権限レベルに応じたスタイルの計算と表示/非表示のバインディングが含まれます。

スウェーデン語なので文字は気にしないでください。

2 行目 (拡張情報) は if.bound であるため、最初は描画されません。

このアプリケーションで、テンプレートの 100 行を含むビューをレンダリングすると、chrome はテーブル全体を 587 ミリ秒でレンダリングします。IE11 は 3779ms でそれを行います。Edge は 1283ms、Firefox は 909ms です。

IE11 では各行に約 30 ミリ秒かかりますが、

aurelia-template を使用すると IE11 のパフォーマンスが大幅に低下する理由はありますか? IE のレンダリング速度を改善するにはどうすればよいですか? バインディングを oneTime に設定しようとしましたが、あまり効果がありませんでした。繰り返しやIEでうまく機能しないカスタム要素で避けるべきことはありますか? テンプレートがかなり大きいため、再利用性とコード管理のためにカスタム要素が必要です。

Aurelia JS フレームワークを使用して、repeat.for 要素の結果が親 VM のコードによって DOM に完全にロードされたことを検出できる必要があります。リスナーを @bindable に挿入し、attached() でリスナーをトリガーできることはわかっていますが、それは私には非常にばかげているようです。

何か案は？

ポップアップ ダイアログへのルートが必要です。@noView でビューモデルを作成しました

しかし、これはこのエラーにつながります:

私の意見では、navbar.ts からポップアップを表示することは適切ではありません。navbar にそのようなコードを含めるのは好きではないため、より適切な場所に配置することをお勧めします。

ページの現在のコンテンツを失うことなくnavbarからポップアップを表示する最良の方法は何ですか?基本的にどこからでも表示でき、navbar.tsのコードもまったくありません。

これを達成するためのより良い方法はありますか？ページ レイアウトを再考する必要がありますか?

ありがとう。