Knockout JSと大型モデル

Question

KnockoutJSを使用する最良の方法を理解しようとしています。

私のビューモデルには一連の「ドキュメント」があり、それぞれに「値」のセットがあります。 各「文書」は、以下のテンプレートを使用して、別のテーブルとして表示されます。

<div data-bind="foreach: Documents"> 
     <table data-bind="foreach: Values"> 
      <tr data-bind="foreach: $data"> 
       <td data-bind="attr: {colspan: Colspan}"> 
        <label data-bind="text: Label"></label> 
        <br /> 
        <span data-bind="html: Value"></span> 
       </td> 
      </tr> 
     </table> 
</div> 

すべてがビューモデルが大のときを除いて正常に動作します。

たとえば、ビューモデルのサイズが約1メガバイト（80個のドキュメントにそれぞれ60個の値を含む）の場合、レンダリングは自分のマシンで2分以上かかります。パフォーマンスを大幅に向上させるために...またはノックアウトをあきらめ、ちょうどサーバ側でHTMLを構築し、ちょうどそれをブラウザにプッシュするより速くなります方法があるかどう

私は...疑問に思って

レンダリング「ちょうど」300kbのビューモデルは30秒近くかかります。

「ドキュメント」はユーザーによって定義されているため、> 2メガバイトのシナリオもあります（私はなぜそれを行うのかわかりません）。

JavaScriptで大規模なビューモデルを使用している人はいますか？

Answer 1

データを遅延ロード（ロードオンデマンド）できない現在の要件では、かなり制限されています。

サーバー側のHTML

HTMLサーバー側を生成すると、最速の方法となります。しかし、たとえモデルが巨大であっても、遅れが生じるだろう。 5MBのHTMLファイルをダウンロードすることを検討してください。ブラウザをある程度時間をかけて解析して、それほど大きなものをレンダリングします。あなたはまだ私の最高の提案は、IFRAME内の各文書を入れて、あなたのノックアウトJSフレームワークを使用する場合は

はSTILL KNOCKOUT JS

を使用しています。これは本当に推奨されておらず、サーバーに余分な負荷をかけることになりますが、正しく実装されていれば、ユーザーエクスペリエンスが向上します。

www.mysite.com/view/1 

<div> 
    <iframe src="www.mysite.com/view/1/document/1"></iframe></div> 
<div> 
    <iframe src="www.mysite.com/view/1/document/2"></iframe></div> 
... 

www.mysite.com/view/1/document/1 

<!-- Just the single Document template --> 
    <table data-bind="foreach: Values"> 
     <tr data-bind="foreach: $data"> 
      <td data-bind="attr: {colspan: Colspan}"> 
       <label data-bind="text: Label"></label> 
       <br /> 
       <span data-bind="html: Value"></span> 
      </td> 
     </tr> 
    </table> 

クライアントブラウザは、最初はすべてのIFRAMEを含むすべてのHTMLを取得し、それぞれの要求を非同期にディスパッチします。各単一のドキュメントリクエストは、ノックアウトJSを独自のフレームで非同期でレンダリングされます。

ユーザーインタラクションを改善するために、IFRAMEにロードイベントを設定することもできます。ロードイベントは、スクロールバーがないようにIFRAMEのサイズを変更するか、またはIFRAMEからHTMLを抽出し、IFRAME要素を抽出されたHTMLに置き換えることができます。

Answer 2

KOのネイティブテンプレートエンジンは特に高速ではありません。私はまずjQuery.tmplエンジン（described here）を試してみましょう。それが十分に速くない場合は、レンダリングされるコンテンツの量を減らそうと考えるべきです。たとえば、各ドキュメントのヘッダーを最初にレンダリングしてから、選択または展開されたときに詳細をレンダリングします。

Answer 3

アプリケーションがどのように動作するのかわかりませんが、すべてのコンテンツを一度に表示する必要がない場合は、モデルを分割して埋め込むことができます。私のアプリケーションの1つと同様、アイテムの大きなリストを持つビューモデルがありますが、テーブルに表示されるものだけが含まれています。ビューにはさらに詳細な情報が含まれている項目が選択されており、リストから項目が選択されたときにその情報が入力されます。

一般に、UIでレンダリングされていないビューモデルでも、あらゆる種類のものを入れていることはほとんどありません。それはあなたがあなたのものをサーバから直接取得するならばいくつかの利点がありますが、一方でビューモデルを膨らませるかもしれません。