Блог

Я использую несколько плагинов jQuery в различных представлениях на моем сайте. В некоторых случаях плагины инициализируются во внешнем javascript при загрузке страницы с помощью document.ready. В других случаях инициализация выполняется в обратном вызове fn другого плагина или, возможно, после того, как вызов ajax перезагружает частичное представление.

Я обнаружил, что копирую-вставляю один и тот же фрагмент инициализации плагина более чем в одно место в зависимости от того, как / где его нужно инициализировать.

Чтобы проиллюстрировать это примером:

Пример 1: полный календарь, в котором используется qTip, который, в свою очередь, использует плагин expander

 $(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
 });
  

Естественно, я не большой поклонник этого подхода, и мне было интересно, есть ли лучшие способы справиться с этим. Я предполагаю, что я ищу концепцию «частичного просмотра», но для javascript на сайте .NET MVC3 Razor. Идея заключается в том, чтобы иметь фрагмент $ (‘div.expandable’) в общем расположении и включать его везде, где это необходимо.

Есть идеи / предложения, которые могли бы работать и с обоими внешними файлами js?

Спасибо!

Что я обычно делаю, так это создаю вспомогательные объекты для моих фрагментов javascript. Смотрите это для «руководства».

Что вы делаете, это создаете файл с именем JavascriptHelper.cshtml в вашей папке app_code и добавляете к нему довольно:

в основном:

 @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, даже если их параметры немного отличаются.