問題タブ [singlepage]

以下のjsperfで、javascript文字列テンプレートが同等のknockout.jsテンプレートよりもはるかに遅い理由を理解しようとしています。テストの目的は、シングルページアプリケーションのリンク全体と部分的なページの変更を測定することです。

http://jsperf.com/knockoutvjquery/6

もともとはunderscore.jsテンプレートの速度だけをテストするつもりでしたが、今はハードコードされた生の文字列をdomに書き込んでいます。速度テストが単純なdom要素である場合、それらは高速であるように見えますが、「現実世界」の状況に入ると、ノックアウトテストはより高速になります。何が得られますか？

準備コードHTML

すべてのテストのセットアップを定義する

すべてのテストの分解を定義する

テスト1-jquery

テスト2-ノックアウト

現在、バックボーン マリオネット アプリを作成しています。これは最終的に約 6 つの異なる「画面」またはページになり、コンテンツを共有することが多く、リージョンを最適に構造化してアクセスする方法がわかりません。

ここで説明されているアプリ/モジュールのセットアップを使用しています: StackOverflow question 11070408: How to define/use several routings using backbone and require.js . これは、時間の経過とともに新しい機能とコンテンツが追加され、スケーラブルである必要がある (そして明らかに可能な限り再利用可能である) アプリケーションになります。

私が構築しているシングル ページ アプリには、すべての画面に、ヘッダー、プライマリ コンテンツ、セカンダリ コンテンツ、フッターの 4 つのプライマリ セクションがあります。

フッターはすべてのページで一貫しており、ヘッダーは 3 ページで同じで、残りの 3 ページではわずかに変更されています (同じ要素/コンテンツの約 80% を使用)。「morecontent」領域は、さまざまなページで再利用できます。

私の app.js ファイルでは、次のようにリージョンを定義しています。

さて、前述の投稿のアプリのセットアップを参照すると、リージョンを処理するための最良の方法は何でしょうか. 各サブアプリの各リージョンを個別に再宣言しますか? これは、モジュールをできるだけ独立した状態に保つための最良の方法のようです。そのルートに行く場合、サブアプリ間でこれらの領域を開閉または非表示/表示する最良の方法は何ですか?

または、app.js で宣言されたリージョンを保持する必要がありますか? もしそうなら、どのようにサブアプリからそれらの地域のイベントを変更し、調整するのが最善でしょうか? app.js ファイルで定義されたリージョンを持つことは、どのモジュールとコアアプリがお互いについて知っているかを最小限に抑えるのに直感に反するようです。さらに、私が目にするすべての例には、メインのアプリ ファイルに appRegions メソッドがあります。サブアプリからこれらのリージョンにアクセスして変更するためのベスト プラクティスは何ですか?

前もって感謝します！

私は現在、非常に大きな単一ページの Web/JavaScript アプリケーションになるものを書いています。

私が使用しているテクノロジは、ASP.NET MVC4、jquery、knockout.js、およびmplify.js です。

私が抱えている問題は、すべてではないにしてもほとんどの単一ページ アプリケーションの例は、すべてのスクリプト テンプレート (jquery、handlbars など) が残りのファイルと同じファイルにある小さなアプリケーション用であることです。 htmlコードの。これは小規模なアプリでは問題ありませんが、私が構築しているアプリケーションは、非常に多くの画面を持つ完全なメンテナンス ロジスティクス アプリケーションです。

私がこれまでに取ったアプローチは、外部シェル (メインの index.cshtml ファイル) があり、jquery の load() メソッドを使用して、ユーザーが特定の選択をしたときに必要な特定のファイルをロードまたは挿入することです。

例：

App.loadModule 関数のコードは次のとおりです。

新しくロードされた画面上のさまざまなフォーム要素と実際にやり取りを開始する必要があるまで、すべてが順調に進んでいました. jquery はそれらを直接処理できないようです。.live() または .delegate() はイベントではなく、テキスト ボックスとボタンであり、場合によっては css クラスを変更する必要があるため、使用できません。

私が見つけた唯一の方法は、外側のシェル ( .load() を介してロードされなかったもの) から要素のハンドルを取得し、jquery の .find() メソッドを次のように使用することです。

明らかに、フォーム要素とやり取りしたり、フォーム要素から値を取得したりする必要があるたびに、このようなことをする必要はありません。

単一のファイルにすべての html コードを配置することなく、潜在的に数百の .html ファイルを含む保守可能な非常に大きな単一ページアプリケーションを作成し、それでもこの .load() 問題を回避する方法について、誰かアイデアはありますか?持っていますか？

どんな考えでも大歓迎です。:-)

V/R

クリス

アップデート

私は更新を投稿し、物事がどのように進み、何が機能したかについて投稿すると思いました. 多くの調査の結果、Google の AngularJS Javascript フレームワークを使用することにしました。それは試練を指数関数的に単純化し、私は間違いなく、大規模なSPAの作成を検討しているすべての人にそれを見てもらうようにアドバイスします.

リンク:

メインサイト http://angularjs.org/

Angular の素晴らしい無料ショート ビデオ: http://www.egghead.io/

Disqus を PJAX や通常の#!AJAXなどで適切に動作させた人はいますか?

これを行っている人々の例をいくつか見てみましょう。

1. http://donejs.com/
2. http://www.playmodules.net/demo/1

1 つ目は Hash bang スタイルを使用し、2 つ目は PJAX を使用しています。これらのサイトをクリックすると、Disqus で gravatar アイコンが消え、javascript コンソールを開くと、通常、DISQUSオブジェクトのバインド解除に問題があるため、エラーとログ メッセージが表示されます。

私は自分のランダムなハックを試しました（縮小によって難読化されていないDISQUS jsを見つけることができないため、これは困難です）：

基本的に、PJAX が新しいページをロードするときにクリーンアップする必要があるように、一連のクリーンアップ手法を試しましたが、常にnull例外をスローするイベントがいくつか発生します。

/apiすべての URL (先頭に付加されていない、または JS/images などの静的リソース) をにリダイレクトするように nginx を構成するにはどうすればよいindex.htmlですか? 理由は、単一ページのアプリケーションで HTML5 プッシュ状態 URL を使用しているためです。URLによってAJAXかJSか意味内容が変わる

私の現在のnginx設定は次のようになります：

問題が発生したときに、Upshot.js を使用して SPA をプログラミングしようとしています。

エラー:「System.Web.Mvc.HtmlHelper」には「メタデータ」の定義が含まれていません

次の行を追加してこれを解決しました。

web.config ファイルで。

しかし、今は 404 エラーです。Index.cshtml ファイルが見つかりません。

「upshot.metadat....」行を追加する前は、うまく機能していました。だから私は問題がどこにあるのか理解できません。

jqueryMobile +ノックアウト+そよ風+ WebAPIを使用して、モバイルコンテキスト（信頼できないインターネット接続）でSPA（シングルページアプリケーション）について学ぶ簡単な「todo - helloworld」を書いています。

オフラインでの使用を有効にするために、WebApp は活用します

• アプリケーションキャッシュ
• ローカルストレージ

アプリは、データの読み込みと保存に可能な限りリモート データベースを使用する必要がありますが、オフラインの場合はローカル ストレージにシームレスに切り替え、オンラインに戻った場合はローカル/リモートの変更を同期できる必要があります。

質問に戻ります。アプリは Breeze の EntityManager を使用してデータを管理します (ローカル キャッシュとリモート同期)。

• 「リモートデータベース」

不整合/同時実行の問題を軽減するために、2 つの localstorage キーを使用します。

• リモート データベースのローカル コピー用の「localDb」（todo のリスト）
• アプリがリモート データベースに送信できなかった変更の「localPendingChanges」

したがって、フローは多かれ少なかれ次のようになります (疑似コード):

このアプローチについてどう思いますか？めちゃくちゃですか？大丈夫ですか？マルチ ユーザー シナリオでの同時実行の問題についてはどうでしょうか。

jee6バックエンド（jsonベースのAPIのみ）と多くのクライアントサイドコードを備えたアプリを実行しています。シングルページアプリケーションのように見えます（最近のこのクールな流行語）。

コードベースを構造化する方法がわかりません。私が考える方法があります

• バックエンドとフロントエンドに別々のプロジェクトがあります-これは、バックエンド部分が純粋なJavaであり、Mavenやその他すべてのものがあり、すべてのjs固有のビルドツールなどが別々のフロントエンドにあることを意味します。
• すべてを1つのプロジェクトにまとめて、1つのアーカイブ（war）を取得して、すべてのフロントエンドのものを内部に配置してサーバーにデプロイできるようにします。私はそのアプローチが本当に好きではありません...

最初のものを使用する場合の展開はどうですか？このフロントエンド部分から別の「戦争」アーカイブを作成してサーバーにドロップする必要がありますか？

人々が使っている習慣は見つかりませんでした。

単一ページ アプリケーション スタイルの Web アプリケーションを開発しています。ユーザーの役割に基づいてメニューを作成したい。たとえば、管理者ユーザーには管理者メニューと html コンテンツを表示したい、一般ユーザーには別の html コンテンツを表示したい。Razor ビュー エンジンで asp.net mvc を使用しているため、次のように Razor コードで実現できます。

これは、以前は従来の方法で Web アプリケーションを開発していたときの典型的な方法でしたが、単一ページ アプリケーション スタイルの Web アプリケーションを開発するようになってからは、純粋な html コードを記述して、Razor や WebForm などのサーバー サイド ビュー エンジンを使用することを避けました。 asp.net または Velocity、Java EE の Jsp タグ ライブラリ。サーバーコードに依存しない、より独立したフロントエンドコードを書きたい。

とにかく、Razorの代わりにjavascriptとknockoutjsを使用する場合、上記のコードは次のように変更できます。

isAdmin、isGeneralUser、および isOtherUser はビューモデルのプロパティであり、これらの値はユーザーのロールをチェックする ajax 呼び出しを介して設定されます。

私が疑問に思っているのは、ユーザーの役割に基づいてコンテンツを制御するこの種の方法が、セキュリティの観点から問題ないかどうかということですか?

ユーザーの役割によってビューが異なる場合、ビューのコンテンツをどのように処理しますか? 皆さんはこのような状況にどのように対処していますか。

重複の可能性:
seo/ブックマークに Backbone.js プッシュステートを使用する場合、サーバーでバックボーン ビュー/ルートを再利用する

私はBackbone.jsと他のモジュールの束を使用して、 Single Page Appメソッドを処理しています。私の目標：

1. サイトはSEOフレンドリーでなければなりません

2. サーバーは HTML コードをクライアントにブートストラップし、データは JSON モデルに保存されます。

3. サブシーケンス アクションはすべて Javascript によって処理されます (たとえば、新しい画面のレンダリング、バックボーン ルーターを使用した URL の変更など)。

私の質問は次のとおりです。各ルーターの URL で Javascript に合わせてサーバーを構成し、それをDRYに保つ方法は?

たとえば、ユーザーが にwwww.mysite.comアクセスしてからリンクをクリックして に移動する場合、最初のロードで直接 にwww.mysite.com/page/2移動するのと同じでなければなりません。www.mysite.com/page/2

これは古いトピックのようですが、Javascript でテンプレート コードを繰り返さずにサーバー側でこれを処理するための最良の方法について、確固たるリソースが見つかりません。

私が考えている 1 つのオプションは、バックエンドを Node.js と別のサーバーに分割して、API のみを処理することです。Node.js サーバーは、何らかの形でテンプレート構築コードを Javascript フロントエンドとして共有します。

とにかく、ここでそのような質問をするのが適切でない場合は、アドバイスと謝罪を聞くのが大好きです.