4

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 やクラスを探し、JavaScript と特に jQuery を使用して動的な動作を与えます。この拡張コードは、外部スクリプトがダウンロードされた後、本文の最後に発生します。

では#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文を再実行しない限り、新しい要素には日付ピッカーがありません。

たとえば、#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()DOM に何かが追加されるたびに jQuery/browser が発生させるイベントはありませんか?

4

2 に答える 2

1

私が正しく理解している場合、これはあなたの質問に対する部分的な回答にすぎないかもしれません。

の例に関しては<input type="text" class="date" />、jQuery の目立たない検証を使用する部分フォーム ビューで同様の問題が発生しました。それらをブラウザーにロードするとき$.validator.unobtrusive.parse('a form selector');、次のフォーム送信時に適用される検証ルールを取得するために呼び出す必要がありました。

コードの繰り返しを避けることが目標である場合は、jq unobtrusive validation 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');

アップデート

scripts フォルダーにある jquery.validate.unobtrusive.js ファイルを見てください。これは非常にスマートで、別の jquery プラグイン (validate など) を実際に拡張していない場合、コードは非常にスリムになります。HTML とスクリプトを完全に分離したい場合は、HTML5 の目立たない data- 属性を使用するのが良い解決策です。

于 2011-12-08T22:20:32.293 に答える
0

@olivehour応答を正しいものとしてマークしました。これは、問題の適切な解決策を示しているためです。

私が最終的に行ったことは、jqueryファイルを先頭に移動することです。jqueryファイルだけ、残りは「jquery-ui」のように、またはカスタムjsファイルはまだ下部にあります。

理由は、$(document).readyまたはを使用できること$(function(){})です。ビューでそれを使用すると、コードは「onload」で実行されるか、「onload」がすでに発生している場合はすぐに実行されます。これは、私が望むものに最適です。

乾杯。

于 2011-12-09T13:58:26.173 に答える