Шаблоны ASP.NET MVC3 Editor, загруженные через Ajax без дублирования jQuery? - PullRequest
Новая
       5

Шаблоны ASP.NET MVC3 Editor, загруженные через Ajax без дублирования jQuery?

1 голос
/ 26 января 2012

Я использую EditorTemplates для таких вещей, как DateTime, Colors и т. Д. Мои формы, которые могут содержать довольно много этих шаблонов, в основном загружаются через Ajax как частичное представление.

Вместо того, чтобы иметь кучу сценариев инициализации jQuery внизу каждого шаблона редактора, существует ли концептуальный способ сделать это только один раз за ответ?Допустим, у вас есть 10 сборщиков времени даты, в одной форме было бы очень глупо передавать один и тот же код инициализации 10 раз.

Размещение сценария инициализации в главной форме с помощью 10 средств выбора даты будет эффективным (конечно, мало что поможет сохранить код изолированным от шаблона редактора даты и времени), но есть и другие случаи, когда вы можете просто захотетьиметь один указатель времени даты в другой форме, два или три, и теперь вы дублируете эти сценарии в нескольких представлениях в вашем коде.

Так как же мне по-прежнему использовать шаблоны редактора правильным способом здесь?Я думаю, что я ищу что-то вроде - 

EnsureThisScriptIsOutputOncePerThisResponse(<script>$('.datepicker').datepicker("insert lengthy config here");</script>)

, чтобы добавить в конец шаблона редактора, который работает с частичными представлениями, визуализированными через AJAX.

Ответы [ 4 ]

2 голосов
/ 26 января 2012

Так как же я могу по-прежнему правильно использовать шаблоны редактора? я думаю, я ищу что-то вроде - EnsureThisScriptIsOutputOncePerThisResponse () для добавления в конец шаблон редактора.

Использование Кассета . Это библиотека, которая позволяет вам ссылаться на скрипты и таблицы стилей из любого места - даже из частичных представлений. Затем он обеспечивает порядок ссылок на сценарии и отображает сценарии, обеспечивая вывод этого сценария и его ссылок только один раз и, как правило, в одном месте в ответ.

Обновление:

Ссылки на скрипты для ajax могут быть выполнены следующим образом

В шаблоне редактора DatePicker - EditorTemplates / DateTime.cshtml 

@model DateTime?
@{
    Bundles.ReferenceScript("path to datepicker script. Script may reference jquery ui in its turn");
} 
//datepicker

И в форме контейнера datepicker, непосредственно отрисовывайте сценарии. Если бы не Ajax, это было бы сделано на странице макета 

@model ViewModelModelWithTenDates
@Bundles.RenderScripts() //will output distinc script references in order

//10 datepickers
@Html.EditorFor(model => model.FirstDate)
1 голос
/ 31 января 2012

Я использую атрибут init для всего, что требует запуска скрипта: 

<input type="text" id="id" init="datepicker makereadonly" />

Это указывает на то, что необходимо запустить две функции.Запуск их выполняется в Ajax-complete, который определен во внешнем файле, обратите внимание, что после инициализации элемента устанавливается инициализированный атрибут.Таким образом, в ваших частичных представлениях нет сценариев. 

var initFunctions = initFunctions || {};

initFunctions.datepicker = function(item) {
    $(item).datepicker();
};

initFunctions.readonly = function(item) {
    $(item).attr("disabled", "disabled");
};

$('body').ajaxComplete(function (e, xhr, settings) {
  var itemFunction = function (item) {
     var $this = $(item);
     var attr = $this.attr("init");
     var functions = attr.split(" ");
     for (var i = 0; i < functions.length; i++) {
        var funcName = functions[i];
        var func = initFunctions[funcName];
        if (func != undefined)
           func($this);
     }
     $this.attr("initialized", "");
  };

  items = $("[init]:not([initialized])");
  items.each(function (index, item) { itemFunction(item); });
});
1 голос
/ 26 января 2012

Вы можете использовать плагин livequery, чтобы добавить код инициализации во внешний файл .js и включить файл в _Layout.cshtml. 

$(".datepicker").livequery(function(){
    $(this).datepicker("insert lengthy config here");
});
1 голос
/ 26 января 2012

Одна вещь, которую мы сделали в нашем проекте, - это файл startup.js, который расширяет ненавязчивый шаблон javascript, используя атрибуты данных для настройки подобных вещей.Примером для нас являются кнопки.Допустим, у меня был следующий html: 

<input type='submit' data-button=true data-button-icon='ui-icon-check' value='approve' />

файл запуска ищет кнопки примерно так: 

function initializeButtons() {
    $("*[data-button=true]").each(function () {
        var $this = $(this);
        var initialized = $this.data('button-init');
        if (!initialized) {
            var options = {
                disabled: $this.data('button-disabled'),
                text: $this.data('button-text'),
                icons: {
                    primary: $this.data('button-icon-primary') || $this.data('button-icon'),
                    secondary: $this.data('button-icon-secondary')
                }
            };
            $this.button(options);
            $this.data('button-init', true);
        }
    });
}

$(document).ready(initializeButtons).ajaxSuccess(initializeButtons)

Это значительно упрощает управление общим кодом инициализации jQuery UI, и мысоздал расширения HtmlHelper для простого заполнения атрибутов данных для того, что нам нужно / нужно.

...