title: Re-using Javascript snippets in an ASP.NET MVC site
body: <p>I'm using a few jQuery plugins in various views on my site. In some cases, the plugins are initialized within an external javascript on page load using document.ready. In other cases, the initialization is done within the callback fn of another plugin, or maybe after an ajax call reloads a partial view. </p>
  
  <p>I find that I'm copy-pasting the same plugin initialization snippet in more than one place depending on how/where it needs to be initialized. </p>
  
  <p>To illustrate this with an example:</p>
  
  <p>Case 1: <a href="http://arshaw.com/fullcalendar/" rel="nofollow">FullCalendar</a> which uses a <a href="http://craigsworks.com/projects/qtip2/" rel="nofollow">qTip</a> which in turn uses the <a href="http://plugins.learningjquery.com/expander/" rel="nofollow">expander</a> plugin</p>
  
  <pre><code>$(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
                      }
                  }
  </code></pre>
  
  <p>Case 2: Partial View loaded via ajax</p>
  
  <pre><code>$(document).ready(function () {
          // SAME SNIPPET start
          $('div.expandable').expander({
              expandPrefix: '',
              expandText: '[...]',
              userCollapseText: '[less]',
              preserveWords: true,
              widow: 4
          });
          // SAME SNIPPET end
   });
  </code></pre>
  
  <p>Naturally, I'm not a big fan of this approach and was wondering if there are better ways to deal with this. I guess what I'm looking for is a "partial view" concept, but for javascript within a .NET MVC3 Razor site. The idea being to have the $('div.expandable') snippet in a common location and included where ever its needed.</p>
  
  <p>Any ideas/suggestions that might work with both external js files as well?</p>
  
  <p>Thanks!</p>