MVC Частичное представление Javascript

Question

У меня есть частичное представление, созданное для повторного использования. Это частичное представление имеет выпадающий список, который использует плагин Chosen. Поэтому при частичном просмотре я ссылаюсь на выбранный файл js / css вместе с некоторым кодом javascript для подготовки документа.

Работает как задумано. Однако теперь у меня есть страница, на которой я отображаю частичное представление события нажатия кнопки. Пользователи могут нажимать столько раз, сколько они хотят.

Меня беспокоит, что дубликаты js будут загружаться при каждом нажатии кнопки. Это, возможно, причина, по которой люди не рекомендуют добавлять js в Partial View напрямую. В моем случае он должен быть там для плагина и манипуляций в самом частичном представлении. Есть ли хороший способ проверить наличие загруженных js и предотвратить их повторную загрузку при последующем щелчке?

Answer 1

Файлы JavaScript и CSS для Chosen должны быть включены на страницу при первой загрузке страницы. Когда пользователь нажимает кнопку, сделайте Ajax-вызов, чтобы включить частичное. В обратном вызове успеха для запроса AJAX инициализируйте код подключаемого модуля Chosen для выпадающих списков, которые только что были вставлены на страницу.

Вы правы в том, что будут загружены дубликаты файлов JS и CSS, а это определенно то, что вам не нужно.

$.ajax(...)
    .done(function(data) {
        $("#foo")
            .html(data)
            .find("select")
            .each(function() {
                $(this).chosen({...});
            });
    });

Answer 2

Расширяю мой комментарий ответом.

Вы можете оставить несколько файлов CSS, я не думаю, что это принесет вред. Что касается файлов JS, сначала вы должны создать файл-оболочку

wrapper.js

$(function() {
      if (!$().chosen) { //we do this only if chosen is not present
         var script = document.createElement('script');
         script.type = 'text/javascript';
         script.src = 'url to yor chosen library';

         $("body").append(script);
      }     
});

И тогда, по вашему мнению, вы будете ссылаться на этот файл wrapper.js вместо вашего chosen Путь к библиотеке.