AjaxとDHTMLを簡単にするために、Webアプリケーションをどのように構成しますか？

StackOverflow https://stackoverflow.com/questions/8346437

質問

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"/>:

  1. jquery datepicerを初めて作業させるためには、私は電話しなければなりません $('input.date').datepicker() の終わりに <body>、外部の後 <script> 宣言。

  2. ページが部分的なビューをダウンロードする場合 <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(){}), 、ビューでそれを使用しているため、コードは「オンロード」またはまっすぐに「オンロード」が既に提起されている場合、私が望むものに最適なものを実行します。

乾杯。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top