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

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

1 голос
/ 10 ноября 2010

Я хочу начать со страниц, которые работают без 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>/ странице.

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

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

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

1 Ответ

2 голосов
/ 10 ноября 2010

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

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

...