ASP.NET MVCサイトでJavascriptスニペットを再利用

Question

私は自分のサイトのさまざまなビューでいくつかのjQueryプラグインを使用しています。場合によっては、プラグインは、document.readyを使用して、ページの読み込み時に外部のjavascript内で初期化されます。他の場合、初期化は別のプラグインのコールバックfn内で行われるか、またはajax呼び出しが部分的なビューを再ロードした後に行われます。

私は、同じプラグイン初期化スニペットをどのように/どこで初期化する必要があるかに応じて複数の場所にコピー貼り付けていることがわかりました。

ケース1：

は一例でこれを説明するために順番に expanderプラグインを使用しています qTipを使用する FullCalendar

$(function() { 
    $('#calendar').fullCalendar({ // calendar 
    .. snip .. 
     eventRender: function (calEvent, element) { // render qtip on eventRender 
      element.qtip({ 
      ...snip... 
       events: { 
        ....snip.... 
        render: function() {// initialize expander on callback 
         // SNIPPET start 
         $('div.expandable').expander({ 
          expandPrefix: '', 
          expandText: '[...]', 
          userCollapseText: '[less]', 
          preserveWords: true, 
          widow: 4 
         }); 
         // SNIPPET end 
        } 
       } 

ケース2：AJAXを介してロード部分図

$(document).ready(function() { 
     // SAME SNIPPET start 
     $('div.expandable').expander({ 
      expandPrefix: '', 
      expandText: '[...]', 
      userCollapseText: '[less]', 
      preserveWords: true, 
      widow: 4 
     }); 
     // SAME SNIPPET end 
}); 

当然ながら、私はこのアプローチの大きなファンではなく、これに対処するより良い方法があるのだろうかと思っていました。私が探しているのは "部分的なビュー"のコンセプトだが、.NET MVC3 Razorサイト内のjavascriptのためだと思う。このアイデアは、$（ 'div.expandable'）スニペットを共通の場所に持ち、どこに必要なものが含まれているかを示します。

外部のjsファイルでも使用できるアイディアや提案はありますか？

ありがとうございます！

Answer 1

私が通常行っていることは、自分のjavascriptスニペットのためにhelper objectsを作成することです。 See this for a "tutorial".

あなたがやっていることは、あなたのApp_Codeフォルダー内JavascriptHelper.cshtmlというファイルを作成し、かなりそれに追加されます。基本的に

：

@helper qTipRender() 
{ 
    // SNIPPET start 
    $('div.expandable').expander({ 
     expandPrefix: '', 
     expandText: '[...]', 
     userCollapseText: '[less]', 
     preserveWords: true, 
     widow: 4 
    }); 
    // SNIPPET end 
} 

次に、あなたのビュー内：

render: function() { 
    @JavascriptHelper.qTipRender(); 
} 

を

パラメータ付き：

あなたにも追加されて何ができるかのパラメータ：あなたのビュー内のその後

@helper qTipRender(bool preserveWords) 
{ 
    // SNIPPET start 
    $('div.expandable').expander({ 
     expandPrefix: '', 
     expandText: '[...]', 
     userCollapseText: '[less]', 
     preserveWords: @preserveWords, 
     widow: 4 
    }); 
    // SNIPPET end 
} 

：

render: function() { 
    @JavascriptHelper.qTipRender(true); 
} 

は、それは非常に簡単にそれらのパラメータが若干異なる場合でも、javascriptをsnippitsの多くを維持することを可能にします。