Повторное использование виджетов Yesod в результатах AJAX

Question

Я пишу very simple Yesod message list, который использует AJAX для добавления новых элементов списка без перезагрузки страницы (как для других пользователей, изменяющих базу данных, так и для самого клиента, добавляющего элемент). Это означает, что я должен кодировать структуру HTML элементов сообщения как в шаблоне Halmet (при загрузке страницы изначально), так и в шаблоне Julius (когда происходит динамическое добавление). Они выглядят примерно так:

В homepage.hamlet:

$if not $ null messages 
    <ul id=#{listId}> 
     $forall Entity mid message <- messages 
      <li id=#{toPathPiece mid}> 
       <p>#{showMarkdown $ messageText message} 
       <abbr .timeago title=#{showUTCTime $ messagePosted message}> 

И в homepage.julius:

function(message) { 
    $('##{rawJS listId}').prepend(
     $('<li>') 
     .attr('id', message.id) 
     .append('<p>' + message.text + '</p>') 
     .append($('<abbr class=timeago />') 
       .attr('title', message.posted).timeago()) 
     .slideDown('slow') 
    ); 
} 

Я хотел бы, чтобы иметь возможность объединить эти два представления каким-то образом. Мне повезло, или я могу как-то злоупотреблять виджетами как для генерации ответа HTML, так и для заполнения кода в файле JavaScript?

Note: Конечно, я понимаю, что шаблоны должны работать совсем по-другому, поскольку вызов AJAX получает свои значения от объекта JS, а не от сервера. Это длинный выстрел, но я думал, что посмотрю, подумал ли кто-нибудь об этом раньше.

Answer 1

Я думаю, что это что-то вроде лучшей практики AJAX, чтобы выбрать место для рендеринга вашего шаблона, будь то на сервере или клиенте. Yesod (в настоящее время) ориентирован на выполнение рендеринга на сервере.

Это все еще может работать с заменой содержимого AJAX. Вместо того, чтобы получать ответ JSON от POST, вы должны получить ответ text/html, который содержит результат рендеринга шаблона на сервере со значениями, которые были бы возвращены через JSON, а затем заменой innerHTML узла DOM, который является обновлено.

Если вы хотите поддерживать как ответы JSON, так и HTML (для поддержки сторонних приложений через API или что-то еще), вам нужно будет сделать формат ответа функцией запроса; либо добавляя «.json» или «.html» к URL-адресу, либо включающий HTTP-заголовок, в котором указан конкретный тип документа, необходимый клиенту.

Было бы хорошо, если бы Йесод предоставил шаблон «jwhamlet» или что-то, что бы визуализировало HTML через javascript для поддержки рендеринга клиента, но я не знаю об этом. Это не значит, что нет никого, о котором я не знаю, поэтому следите за другими ответами.

Если вы хотите что-то сделать, попробуйте изменить код квазитрековицы деревни, чтобы вместо того, чтобы расширять квази-кавычки до функции генерации html, она расширила их до функции генерации JSON и предварительно обработанный фрагмент текста, который является шаблоном в стиле усов, так что JSON, возвращаемый функцией, предоставит правильный контекст для того, чтобы шаблон был визуализирован так, как вы хотите.