私は現在、非常に大きな単一ページの Web/JavaScript アプリケーションになるものを書いています。
私が使用しているテクノロジは、ASP.NET MVC4、jquery、knockout.js、およびmplify.js です。
私が抱えている問題は、すべてではないにしてもほとんどの単一ページ アプリケーションの例は、すべてのスクリプト テンプレート (jquery、handlbars など) が残りのファイルと同じファイルにある小さなアプリケーション用であることです。 htmlコードの。これは小規模なアプリでは問題ありませんが、私が構築しているアプリケーションは、非常に多くの画面を持つ完全なメンテナンス ロジスティクス アプリケーションです。
私がこれまでに取ったアプローチは、外部シェル (メインの index.cshtml ファイル) があり、jquery の load() メソッドを使用して、ユーザーが特定の選択をしたときに必要な特定のファイルをロードまたは挿入することです。
例：
function handleLoginClick(){
App.mainContentContainer.delegate('#btnLogin', 'click', function() {
App.loadModule('Home/ProductionControlMenu', App.MainMenuView.render());
});
}
App.loadModule 関数のコードは次のとおりです。
App.loadModule = function(path, callback){
App.mainContentContainer.load(App.siteRoot + path, callback);
};
新しくロードされた画面上のさまざまなフォーム要素と実際にやり取りを開始する必要があるまで、すべてが順調に進んでいました. jquery はそれらを直接処理できないようです。.live() または .delegate() はイベントではなく、テキスト ボックスとボタンであり、場合によっては css クラスを変更する必要があるため、使用できません。
私が見つけた唯一の方法は、外側のシェル ( .load() を介してロードされなかったもの) から要素のハンドルを取得し、jquery の .find() メソッドを次のように使用することです。
App.mainContentContainer.find('#btnLogin').addClass('disabled');
明らかに、フォーム要素とやり取りしたり、フォーム要素から値を取得したりする必要があるたびに、このようなことをする必要はありません。
単一のファイルにすべての html コードを配置することなく、潜在的に数百の .html ファイルを含む保守可能な非常に大きな単一ページアプリケーションを作成し、それでもこの .load() 問題を回避する方法について、誰かアイデアはありますか?持っていますか？
どんな考えでも大歓迎です。:-)
V/R
クリス
アップデート
私は更新を投稿し、物事がどのように進み、何が機能したかについて投稿すると思いました. 多くの調査の結果、Google の AngularJS Javascript フレームワークを使用することにしました。それは試練を指数関数的に単純化し、私は間違いなく、大規模なSPAの作成を検討しているすべての人にそれを見てもらうようにアドバイスします.
リンク:
メインサイト http://angularjs.org/
Angular の素晴らしい無料ショート ビデオ: http://www.egghead.io/