問題タブ [hottowel]

私は現在、小さなプロジェクトを開始し、JS と HTML5 の世界を体験しています。

数か月前に試してみましたが、MVC シングル ページ アプリケーションをゼロから作成する時間がなかったのでやめました。理解しなければならない概念やパターンが多すぎて、日々の仕事で使用しないためにそれらの知識をすべて失うことを後悔していたでしょう. 使うか失うか！

昨日、John Papa のブログでこの投稿を見つけたので、それを手始めに使うのは素晴らしいことだと思いました。基本的に、これはHotTowelと呼ばれる MVC テンプレートであり、データ バインディング、ミニフィケーションなどの優れた概念を既に実装しています。今のところ必要なだけコードを体験し、必要になったらすぐにさらに体験します。

私の作品の既存のデータモデルプロジェクトからデータを取得するためのアプリケーションを構築したいと思います。Silverlight アプリケーションでは、ディクショナリやその他のプロパティのプリロードと初期化、および非同期 Init()メソッドの呼び出し (たとえば、カスタム コードを含む XML ファイルをダウンロードしてディクショナリに入れるため) によってブートストラップします。MEF は、扱いにくい依存関係を取り除くために使用されます。

私が理解している限り、サーバー側の初期化はApplication_Start()Global.asax ファイルのメソッドで行う必要があります。このメソッドで非同期呼び出しをどのように待機するのだろうか? ベストプラクティスは何ですか? クライアント側での私のクエリは、これらのクラスの初期化に大きく依存しています。どのようなオプションがありますか?

私の考えは次のとおりでした。

• Application_Start()非同期初期化プロセスを起動して忘れます。初期化が完了する前に (私が推測するコントローラーで) リクエストを実行した場合、初期化プロセスのコールバックを待って、到着したらすぐにクエリを開始する必要があります。これの利点は、ユーザーが既にアプリケーションをナビゲートできる間に、初期化が実行されることです。
• ある種の遅延初期化を実装します。最初のリクエストが行われるとすぐに初期化を処理します。ただし、最初のリクエストには時間がかかる場合があります。
• で初期化プロセスを同期的に実行しますApplication_Start()。これまで見てきた主な欠点は、ブラウザ ウィンドウがフリーズしているように見えることです。ユーザーが現在の初期化ステータス (ある種のスプラッシュ スクリーン) を追跡できるようにすることができれば、このソリューションに問題はありません。

具体的にどのように機能するかはわかりませんが、どのように、どこから始めればよいか、アドバイスをいただければ幸いです。

私はWeb開発に慣れていないので、ご容赦ください:)ホットタオルテンプレート（http://nuget.org/packages/HotTowel/）を使用して新しいASP.NETプロジェクトを作成し、追加しました

index.cshtmlに。また、home.htmlを次のように変更しました。

最後に、home.jsを変更しました。

アプリケーションを実行すると、Chromeはace.jsにUncaught TypeErrorがあることを通知します：nullのプロパティ'env'を読み取ることができません。もちろん、ホーム画面は表示されません。それを機能させるにはどうすればよいですか？

JohnPapaの新しいホットタオルテンプレートを試しています。本当に洗練されていますが、WebAPIで慣れているものと連携させるのに苦労しています。

ルーティングの問題を回避することはできましたが、それでもMicrosoft.AspNet.WebApi.HelpPageパッケージを機能させることができません。

これが私がしたことです：

• ホットタオルVSIXをインストールします。
• 新しいASP.NETMVC4プロジェクト-ホットタオルSPAテンプレート
• ビルド、実行-動作します。
• フォルダを右クリックし、。Controllersという名前のコントローラを追加しますTestController。
• 「空のAPIコントローラー」テンプレートを選択します。

• TestControllerに次のアクションを記述します。

  /li>

• ビルド、実行。

• URLを試す/api/testエラー404を取得The resource cannot be found.
• URLを試してください/api/test/gettestdata。動作します。

次に、デフォルトのAPIルートが変更され、{action}が必要であることに気付いたBreezeWebApiConfig.csので、デフォルトのAPIルートを次の場所に追加し直しました。

今、私がURLを試してみると/api/test、それは機能します。

ここで、ヘルプパッケージを使用したいと思います。

• Microsoft.AspNet.WebApi.HelpPagenugetパッケージを追加します。
• AreaRegistration.RegisterAllAreas();に追加Global.asax.cs
• ビルド、実行。

URL/Helpにアクセスしようとすると、次のエラーが発生します。

HotTowelテンプレートを壊さずにこのエラーを解決する正しい方法は何ですか？

これらのいずれかをバグと見なす必要がありますか？

これは一見馬鹿げた質問のように聞こえるかもしれませんが、なぜホットタオルSPAテンプレートにBreezeが含まれているのですか？

私はここ数日、ホットタオルとその依存関係を学習してきましたが、私が知る限り、テンプレートには実際にBreezeを使用しているものはありません。おそらくそれは将来のリリースで変わるのでしょうか？

確かに、Breezeは優れたライブラリです。ただし、これはCRUD手法にバインドされており、ApiControllerを特定の方法で設計する必要があります。（メタデータ、SaveChangesなど）ここを参照してください

また、EntityFrameworkについても説明します。これはよりソフトな依存関係ですが、Breezeはそれなしのサンプルも表示するため、変更されたリポジトリパターンを使用した同様の実装パターンをガイドします。

CRUDの代わりにNoSQLデータストアまたはCQRSパターンを使用している場合、Breezeの使用は非常に困難になります。AmplifyJSなど、このスタイルで適切に機能するデータアクセス用の代替ライブラリがあります。

しかし、残りのホットタオルは素晴らしいです！私は特にデュランダルが好きです。したがって、テンプレートが実際にデータアクセスを行っていない場合、質問が発生します-なぜデータアクセスコンポーネントをまったく含めないのですか？Breezeなしで出荷する方が良いでしょう。エンドユーザーがBreezeやAmplifyなどを使用したい場合は、そうしてください。ホットタオルの残りの部分は、優れたSPA実装として輝き続けます。

インフューザーがテンプレートを読み込んで監視可能なテンプレートに設定しているのを見ることができますが、レンダリングは行われません。「読み込み中」と表示されるだけですが、afterRender メソッドを呼び出します。テンプレートは次のようになります

テンプレートが読み込まれると、配列にはすでに観察可能なオブジェクトがほとんどありません。しかし、レンダリングされません。ただし、更新ボタンをクリックして、アレイをクリーンアップしてリロードすると、それは大丈夫です。

これは ko 2.2.0 と jquery 1.8 で問題なく動作していました... この更新で KoExternalTemplate は壊れていますか?

編集:再現手順:

1. HotTowel SPA テンプレートを使用して新しいプロジェクトを開始します (このテンプレートをまだお持ちでない場合は、Google で検索してください)。
2. NuGet 経由で koExternalTemplate を追加します。これにより、交通警官とインフィザーもインストールされます。
3. BundleConfig.cs を更新して、TrafficCop、infuser、および koExternalTemplate を追加します。
4. プロジェクトのルートの下にフォルダ名 Templates を作成し、テンプレート ファイルを追加します。テンプレートとファイルパターンを指すようにインフューザー構成でメインjsを更新します（koExternalTemplateのビットを知っている場合は、私が話していることを知っています）。
5. テンプレートを home/details html に含めて、アプリを起動します。

結果: テンプレートの代わりに「読み込み中...」と表示されるだけで、テンプレートはレンダリングされません。

新しいホット タオル SPAプロジェクトを開始したばかりですが、ViewModel からのノックアウトとのバインドに問題があります。

私のビューモデルは次のようになります。

ビューは次のようになります。

しかし、タイトルは常にゴミになります (つまり、デバッガーを使用する場合のような関数のコード: FUNCTION D(){IF(0<ARGUMENTS.LENGTH) [...])

バインディングを "data-bind="text: title()" に変更すると機能しますが、これはオブザーバブルをバインドせず、値のみをバインドすることに気付きました。オブザーバブルを更新できず、値を保存できません。

私とまったく同じコードを使用しているように見える例を見つけましたが、それが機能しない理由がわかりません。

RequireJSと、それを使用して、モジュールで使用しようとしたときに未定義として表示されない依存関係をロードする方法を理解しようと、ぐるぐる回っています。

JohnPapaのPluralsight「SPAwithHTML5」コースから始めました。私が理解していなかったのは、requireJSでAMDの全体的なポイントは、非同期でロードするためにライブラリとそのデータメイン属性に責任を引き渡すことだと思ったときに、バンドルに含まれるスクリプトタグですべてのライブラリを指定する必要がある理由でした何が必要だったか。そのコースで提示されたソリューションについて二重に混乱したのは、データ全体に従わなかったということでした。主な設定は、RequireJSのドキュメントに記載されています。

数か月先に進むと、Durandalを含む「HotTowel」テンプレート、サンプルの「サービス」モジュール、RequireJSドキュメントに従ったセットアップ、およびかなり理解しやすいスターターアプリができました。警鐘を鳴らす唯一のことは、ほとんどのライブラリが通常の「scripts」フォルダにあり、Durandalがアプリケーションロジックとともに完全に別の「app」フォルダにあるという考えです。私がpluralsightSPAコースから1つのことを学び、requireJSで遊んでいるとしたら、単一のフォルダーから物を移動することは非常にすぐに面倒になります。

とにかく、新しいテンプレートは正常に機能します。モジュールの依存関係はうまく機能しており、ViewsとViewModelsはバインドされており、Durandalモジュール（つまり、appフォルダー）にモジュールの依存関係があるサンプルのロガーモジュールがうまく機能しています。ホットタオルテンプレートにあるコードに基づいて、jQueryとmockJsonを使用する別の単純なモジュールを追加するのは簡単なはずですよね？えーと、いや、そうではない。

これは、「app/services」フォルダー内のモジュール「dataservice.js」の開始に関する非常に簡単な宣言です。

もちろん、コードブロック内でアクセスしようとすると、$に対して「undefined」が表示されます。ですから、あまりにも多くの紛らわしい文献を読んだ後（その多くは「これはjquery xxxxで変更されたので、もう関係ありません」というコメントで終わります）私は次の質問があります：

1. ネットワークトラフィックを監視すると、jQueryライブラリが正しくダウンロードされていることがわかります。BundleConfig.csで定義されている「ベンダー」バンドルにmockJSONを追加すると、jQueryがそこにあり、ブラウザで待機しています。自分でモジュール定義を与えていません。モジュールのドキュメントで「未定義」の参照を取り除くには、次のようなものを追加する必要があることを意味しているようです。

   （「text」宣言はすでに存在します。jqueryエイリアスを追加しました）これにより、モジュールに「undefined」ではなく関数が含まれるようになります。これにより、すでに作成したスクリプトの2番目のコピーが発生することを除いて問題の一部が解決されます。 HotTowellテンプレートの「ベンダー」バンドルのためにダウンロードされたように見えます。明らかな理由でjQueryのコピーを2つダウンロードしたくないので、これを修正するにはどうすればよいですか？

2. mockJSONライブラリを「ベンダー」バンドルに追加しました。これは通常、$。mockJSONを使用して参照されます。これを有効にするために何もできません。'require.config（{paths：'宣言でjqueryに対して行ったのと同じプロセスを使用してスクリプトへの参照をハックしたとしても、'ライブラリが2回ダウンロードされる'問題は言うまでもなく、未定義になります。 。モジュールでそのライブラリを使用できるように、ライブラリの依存関係を定義するにはどうすればよいですか？

3. このすべての苦痛は、requireJSが非同期モジュールのダウンロードに関するものであるという事実と関係があると思いますが、jQueryとmockjsonは同期しているため、他の方法（ハードコードされた参照のバンドル）でダウンロードする必要がありますが、それでもrequireJSを意味しますモジュールには依存関係としてそれらを示す方法が必要であり、私が試したことは何も機能していません。これが同期/非同期の問題であるという私の仮定は正しいですか？デュランダルでjQueryと理想的にはjqueryプラグインを使用するサンプルアプリを少なくとも1つ見つけたいと思っていましたが、表示されるのは、他のものではなくデュランダルモジュールを使用するモジュールコードだけです。これらすべてのライブラリがrequireJSのメインルートの外にあるという事実は、参照を取得するために'../'文字列を含むパスに頼らなければならないため、おそらく問題を悪化させています。

4. requireJSがdefineコマンドで「設定より規約」を使用していることを理解しています。モジュールIDを見逃した場合、data-mainを使用して指定された定義済みルートフォルダーからのモジュールソースファイル名とパスに基づいたIDを想定します。ただし、Durandalは、コード内で「entrance」と呼ばれるモジュールを参照しています。このモジュールはルートフォルダーではなく、「Durandal / transitions / entry.js」というフォルダーにあるため、このモジュールへの参照が「Durandal / transitions/entrance」ではなく「entrance」である理由について混乱しています。どこでエイリアスされていますか？

5. 最後に（hoorah）defineステートメントの最初の引数（文字列配列）として依存関係を指定することと、それらの依存関係を省略することの違いの微妙な違いを理解していませんが、モジュールファクトリでは、varsystemのようなものを指定する最初の引数になります= require（'../ system'）-なぜあるフォームを別のフォームよりも優先して使用するのでしょうか。サンプルアプリケーション全体で2つのタイプが混在しているのがわかりますが、その理由がわかりません。

PS：このエントリを編集すると、1から5までの番号が付けられた5つの質問が表示されます。表示すると、1から4としてレンダリングされます。どのフォーマットを試しても、奇妙なHTMLエディタとレンダリングのバグがあります。修正できなかったので、コメントを投稿してください。1から5までの質問が2つではなく、1から5までの質問が5つあるかのように投稿してください。

Durandalで「HotTowel」SPAテンプレートを使用すると、使用可能なすべてのスペースを使用するのではなく、ビューが幅1100ピクセルの中央のウィンドウに配置されることがわかります。

それでも、applicationHost内のすべてのビューは、Twitterの「流体」スタイルからのブートストラップを使用するように設定されています。事実上、bodyタグにハードコードされた最大幅を設定すると、これらすべての流動的なスタイルが冗長になり、意味がなくなります。

app.cssで設定されたボディスタイルをオーバーライドするのは簡単です（途方もなく高い値に設定しても副作用がないと仮定します）が、テンプレートでこのように設定する理由を誰かが知っているかどうか疑問に思っていました、すべてのBootstrap "* -fluid"スタイルが実装しようとしているレスポンシブデザインを実装しようとするすべての良い作業を元に戻していることを考えると、

私は、ホット タオル SPA は言うまでもなく、MVC についておそらく最も経験の浅い人物ですが、これらのテクノロジに基づくシステムを作成することが期待されています。

Breeze の Web サイトと John Papa のすべてのドキュメントを読みましたが、データベースへのインタラクションを作成し、データを取得して表示し、データの削除を含めてデータを追加または編集する方法がわかりません。

画面上に約 5 つのグリッドを表示するダッシュボードを作成して、時間計算を行っているライブ データを表示する必要があります。

これまでの 2 日間は、プロジェクト名を表示するようにホット タオル テンプレートを修正し、ホット タオルのアイコンを変更しただけです。このようなことに頭を悩ませることはできません... 2年間、私は3層アーキテクチャのASP.NET Webサイト開発者です。

このテンプレートを介してデータを渡す方法に関するガイドラインを誰か教えてもらえますか?