ASP.net MVC - ビューとjQueryのベストプラクティス

Question

MVCアプリケーションでjQueryを使用するのがベストプラクティスであることを理解しようとしています。具体的には、私が個々のdocument.readyステートメントですべての意見を混乱させないように、私は何をすべきかを知りたいと思います。一例として、

：

私は次のビューがあります。

/Views/Shared/_Layout.cshtml
/Views/Home/Index.cshtml
/Views/Home/_Dialog.cshtml
/Views/Home/_AnotherDialog.cshtml

私はホーム/インデックスビューをレンダリングしますコントローラのアクションを持っています、レイアウトを使用し、2つの部分的なビュー（またはエディタテンプレート、表示テンプレートなど）をレンダリングします。この1つのコントローラアクションは、4つ以上のビューをレンダリングしました。各ビューはいくつかのjquery document.readyコードを使用しています。

現在、私は、各ビューの下部にコードを持っている：

// In Index 
<script type="text/javascript"> 
    $(function() { 
     $('#tabs').tabs() 
    }); 
</script> 

// In _Dialog 
<script type="text/javascript"> 
    $(function() { 
     $('#some-dialog').dialog(...); 
    }); 
</script> 

私はそれはすでに私の小さなプロジェクトで管理不能になっているので、これは非常に良い習慣ではありません知っています。たくさんのjQuery/javascript初期化コードが何十ものビューに分かれているページがたくさんあるときは、何が良い慣行ですか？

Answer 1

あなたはTelerikがjavascriptレジストラで何をしているのかに沿って何かをすることができます。基本的に、このレジストラをビューモデルで使用できるようにします。レンダリング時に

public class JavascriptRegistrar 
{ 
    private StringBuilder jsBuilder_ = new StringBuilder(); 

    public Add(string js) 
    { 
     builder.Append(js).Append('\n'); 
    } 


    public string ToString() 
    { 
     return "<script type=\"text/javascript\">" + jsBuilder_.ToString() + "\n</script>"; 
    } 
} 

あなたの部分図は、このに追加されます：

<h1>In my view!</h1> 

@Model.Registrar.Add("$function() { /* ... */ }") 

最後に、の下部にある最も単純なレベルで、それが関係しているすべては、それに追加の文字列を追跡していますあなたが完了したときのメインビュー：

@Model.Registrar.ToString() 

これは、レンダリング中に収集したすべてのJavaScriptを書き出します。

Answer 2

初期化がビュー固有のもので、そのビューの外側では使用されないことがわかっている場合（たとえば、ページ固有の動作など）、ビューにそのまま残してください。

ビュー間でjをレプリケートしていない限り、すべてのビューにスクリプトタグがあることに間違いはありません。私は人々がこのケースでは「懸念の分離」を誤解する傾向があり、単純に「異なる言語をどんなところでも離れたところに置いておかなければならない」と考えていると思います。ページの場合、htmlとjsは本質的に互いに「関心事」であるため、jsを別々のファイルに移動することは実際には「良い方法」ではありません。

私は個人的にビューを開き、開かれるとすぐにそのページに固有のすべてのjsとcssを見ることができます。しかし、明らかにコードを共有する必要がある場合は、あなたのビューをバストしてスクリプトフォルダに入る必要があります。

EDIT

あなたの例では、私はあなたのインデックスで参照の上、あなたのタブを初期化表示します。これはそのままですが、プロジェクト内の他のタブを追加した場合は、#tabs idではなく.tabsクラスを使用してタブを作成し、外部のjsファイルですべてのタブを一度に初期化する方がよい場合があります$('.tabs')を呼び出してください。