Разобрать тег шаблона django с пользовательским фильтром для контейнера предварительного просмотра в реальном времени через javascript

Question

Мне нужно создать контейнер предварительного просмотра в реальном времени (например, stackru и Reddit) для моего сайта django, используя текстиль в качестве языка разметки.

Есть ли способ сделать это на стороне клиента? (без использования AJAX?)

Разобрать код из представления так же просто, как:

{% load markup %}
{{ theme.content|textile }}

(Само собой разумеется, я следовал за документацией и включал 'django.contrib.markup' к моему INSTALLED_APPS установка.)

Для простоты, давайте предположим, что мне не нужна поддержка IE. Мой JS выглядит следующим образом:

function change_preview() {
    var fragment = document.createDocumentFragment();
    // I am no sure what should I put here:
    fragment.appendChild(document.createTextNode('{{ theme.content|textile }}'))
    document.getElementById("preview").appendChild(fragment);
}

window.onload = function() {
    var content_box = document.getElementById('id_content');
    content_box.addEventListener("input", change_preview , false );
}

И HTML:

<textarea id="id_content" rows="10" cols="40" name="content"></textarea>
<div id = "preview"></div>

Также я нашел эту библиотеку JS. Это хорошая идея использовать его на стороне клиента вместе с PyTextile на стороне сервера?

Каковы лучшие практики?

Я ищу решения не-JQuery, но я приму их, если нет других способов сделать это.

Заранее спасибо.

Answer 1

Так как текстиль определяет, какая разметка соответствует тому, что HTML, я не вижу большого потенциала для несовместимости между JS-библиотекой и Py-библиотекой.

В вашем скрипте для немедленного обновления предварительного просмотра вы можете использовать keyup событие вместо input событие, так как последний срабатывает только тогда, когда textarea теряет фокус

window.onload = function() {
    var content_box = document.getElementById('id_content');
    content_box.addEventListener("keyup", change_preview , false );
}

Чтобы использовать библиотеку Бена Даглиша, которая не основана на jQuery, ваш обработчик событий должен выглядеть так:

function change_preview() {
    var content_box = document.getElementById('id_content');
    var html = convert(content_box.value);
    document.getElementById('preview').innerHTML=html;
}