AjaxとDHTMLを簡単にするために、Webアプリケーションをどのように構成しますか?
-
27-10-2019 - |
質問
Websinteのこの構造を考えると
<html>
<head>
<!-- CSS at the beginning-->
<link/>
</head>
<body>
<div id="mainContainer">
<div id="side"></div>
<div id="content">
<!-- DHTML awesomeness happens here -->
</div>
</div>
<!-- Scripts at the end -->
<script/>
<script>
/* code that attach the JS logic to the HTML items */
</script>
</body>
</html>
通常のWebナビゲーションを使用して、ページはHTMLで完全にレンダリングし、プログレッシブエンハンスメントアプローチに従って、最後に特定のIDまたはクラスを探します。この拡張コードは、外部スクリプトがダウンロードされた後、本体の最後で発生します。
の #content
, 、jQuery ajaxの相互作用の多くが発生し、それらのいくつかはサーバーから他の部分的なビューを取得してページに挿入しますが、それらのIDとクラスを再度探して、JavaScriptオブジェクトをこの新しい要素に添付する必要があります。
コントローラー、イベントハンドラー、または既に持っているオブジェクトを再適用したくないので、それは非常に面倒かもしれません。
これまでのところ、私が見つけた唯一の解決策は、私の部分的な見解に置かれることです。
@if(Request.IsAjaxRequest())
{
<script>
/* code that attach the JS controllers to the HTML items of this view */
</script>
}
たとえば、必要なときに同様の問題が発生すると思います $('input.date').datepicker()
、そしてあなたは新しい追加を追加します <input type="text" class="date"/>
要素の動的には、新しいものはjQuery文をrexecuteしない限り、日付ピッカーを持っていません。
たとえば、それを考慮して #content
を持っています <input type="text" class="date"/>
:
jquery datepicerを初めて作業させるためには、私は電話しなければなりません
$('input.date').datepicker()
の終わりに<body>
、外部の後<script>
宣言。ページが部分的なビューをダウンロードする場合
<input type="text" class="date"/>
要素、Ajax呼び出しのビューに初期化コールを配置する必要があります。
そのため、繰り返しコードで終わります。これは、C#のように簡単にコードをリファクタリングできないJSで特別に欲しくないものです。
これは先週、これを達成するためのより良い方法があるかどうか疑問に思って、私を夢中にさせているものですか?より良いテクニック、または他の全体のアプローチ?
Webアプリケーションをどのように構成しますか?
敬具。
PS:ようなものを持っているといいでしょう .live()
また .delegate()
しかし、イベントに関連するだけでなく、そうではありませんか? Jquery/ブラウザがDOMに追加されるたびに上昇するイベントはありませんか?
解決
私が正しく理解していれば、これはあなたの質問に対する部分的な答えかもしれません。
のあなたの例について <input type="text" class="date" />
, 、私たちは、jQueryを使用しない控えめな検証を使用する部分的なフォームビューで同様の問題を経験しました。ブラウザにロードするとき、電話をかける必要がありました $.validator.unobtrusive.parse('a form selector');
次のフォームの提出時に検証ルールを適用するために。
目標が繰り返されるコードを回避することである場合、JQの目立たない検証libのようなパターンを使用して、JSアクションを控えめにすることができます。したがって、このように見えるHTMLになります。
<input type="text" class="date" data-datepicker="true" />
その後、初期化ロジックを目立たない解析方法に配置できます。
parse: function(selector) {
$(selector).find(':input[data-datepicker=true]').each(function() {
$(this).datepicker();
}
};
}
これにより、コードをリファクタリングする場所が1つあるという問題が解決します。ページが最初にロードされたときに自動的に起動することができ、AJAXを介して新しいコンテンツをロードすると、すべての一致する要素にルールを適用するだけで、呼び出すだけでルールを適用できます。 myAppNamespace.unobtrusive.parse('selector for the partial view content');
アップデート
スクリプトフォルダーのjquery.validate.unobtrusive.jsファイルをご覧ください。それは本当にかなり賢いです。実際に別のjQueryプラグインを拡張していない場合(検証など)、コードはかなりスリムになります。 HTMLとスクリプトの完全な分離を探している場合、HTML5を使用して目立たないデータ属性を使用することは、優れたソリューションIMOです。
他のヒント
@olivehourの応答は、問題の良い解決策を述べているため、正しいものとしてマークしました。
私がついにやったことは、jQueryファイルをヘッドに移動することです。残りは「jQuery-ui」、またはカスタムJSファイルのようなJqueryファイルだけです。
その理由は、使用できることです $(document).ready
また $(function(){})
, 、ビューでそれを使用しているため、コードは「オンロード」またはまっすぐに「オンロード」が既に提起されている場合、私が望むものに最適なものを実行します。
乾杯。