Использование ненавязчивого Ajax, но по-прежнему работает Javascript страницы, которую выбирают

Question

Я хочу начать со страниц, которые работают без Javascript, затем добавить причудливость Javascript и, наконец, добавить несколько кусочков Ajax.

Все это, кажется, держит вещи в чистоте, я был очень рад своим первым экспериментам с ним. Затем я столкнулся со следующей проблемой, для которой не вижу хорошего решения. Для этих 2 примеров страниц:

<!-- /products/ -->
<ul>
    <li>
        Product A thumbnail
        <a href="/details/1/">Details for A</a>
    </li>
    <li>
        Product B thumnail
        <a href="/details/2/">Details for B</a>
    </li>
</ul>

<!-- /details/<id>/ -->
<script type="text/javascript" src="/details.js/"></script>
show details about the product with the given id
details.js will unobtrusively enhance it

Функциональность, которую я хочу

Используйте Ajax для динамической загрузки некоторых деталей продукта на /products/ страницы, например, при наведении на миниатюру. Точнее, получить и показать упрощенную версию /details/<id>/ на /products/ стр.

Ненавязчивая реализация

При наведении фотографии, сделайте запрос Ajax для href атрибут соответствующего якоря. Сервер может ответить с полным /details/<id>/ страница и селектор JQuery могут вырезать только интересные части. В качестве альтернативы сервер может увидеть, что запрос особенный, и просто вернуть интересные части. Пока все хорошо, легко и чисто.

Эта проблема

/details/<id>/ страница - это больше, чем просто HTML. Он также имел свой собственный Javascript, чтобы сделать его причудливым, поэтому я хочу использовать этот Javascript в /products/ стр. Я хочу /products/ извлечь не только HTML из /details/<id>/ но также повторить поведение Javascript, которое присутствует на полноценном /details/<id>/ стр.

Единственное (плохое) решение, которое я мог придумать

Напишите явный код, чтобы повторить действия браузера при загрузке страницы: fetch /details/<id>/ищи все <script> теги, извлекайте этот Javascript, вызывайте обработчики при загрузке. Это много шаблонных вещей, которые, кажется, трудно понять правильно. Я явно не хочу писать это, потому что результат будет совсем не простым.

Я также чувствую, что это проблема, которая возникает очень часто, если вы действительно придерживаетесь ненавязчивого Ajax, и для этого должно быть более элегантное решение.

Answer 1

С архитектурной точки зрения более чистым решением было бы использование вызова Ajax, который бы возвращал только данные о продукте (мог бы использовать представление XML или JSON), а не получение HTML и попытка отбросить из него данные о продукте. Цель состоит в том, чтобы отделить данные от презентации. Техника, которую я использовал для подобных сценариев (детали появляются при наведении курсора), заключается в том, чтобы иметь HTML-шаблон, который включается в страницу, но скрывается. При наведении курсора мыши сделайте вызов Ajax, чтобы получить данные о продукте (я обычно кэширую данные, чтобы при последующих наведениях мыши для того же элемента не приходилось повторно извлекать данные), заполните шаблон HTML, разместите его, а затем отобразите.

Если вас беспокоит дублирование JavaScript, возможно, JavaScript следует перенести в отдельные файлы, которые могут быть включены. Если JavaScript очень специфичен для страницы, то, возможно, его нужно сделать более общим / многократно используемым. Или, возможно, вам следует использовать CSS и / или серверные технологии, а не JavaScript, чтобы "сделать это модным".