Как избежать написания одного и того же кода дважды на динамическом веб-сокете сайта в шаблонах django и javascript?

В проекте django на бэкенде используются шаблоны, которые рендерят html, отображаемый на странице. Но при работе с каналами (websockets), которые получают "уведомления" с сервера, я обнаружил, что мне приходится переписывать код на javascript, чтобы отобразить те же html-элементы.

В качестве примера я начал с элемента HTML-таблицы, который в странице шаблона django:

    {% for t in tickets %}
    <tr class="ticket-row">
        <td>{{ t.id }}</td>
        <td>
            <a href="/tickets/{{ t.id }}">
                {{ t.subject }}
            </a>
        </td>
        <td>
            <a href="/users/{{ t.user.id }}">
                {{ t.user.name}}
            </a>
        </td>
        <td class="tooltipped" data-tooltip="{{ t.date_time_updated }}">
            {{ t.date_time_updated|naturaltime }}
        </td>
        <td class="tooltipped" data-tooltip="{{ t.date_time_created }}">
            {{ t.date_time_created|naturaltime }}
        </td>
        ....

Когда каналы получают уведомление в javascript, я хочу вставить еще одну строку в таблицу без обновления, поэтому я пишу JS код для этого следующим образом:

function insertTicketRow(ticket) {
    document.getElementById("results").innerHTML = "Server: " + data.subject;
    var table = document.getElementById('ticket_table');
    var row = table.insertRow(1);
    // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
    var cellId = row.insertCell(0);
    var cellSubject = row.insertCell(1);
    var cellFrom = row.insertCell(2);
        cellId.innerHTML = data.id;
    cellSubject.innerHTML = linkElement("/tickets/" + data.id, data.subject);
    cellFrom.innerHTML = linkElement("/users/" + data.user, data.author_name);
    cellLastUpdated.innerHTML = data.date_time_updated;
    cellCreatedOn.innerHTML = data.date_time_created;
    ....
}

Очевидно, что это не поддерживается, и я подозреваю, что это худший из возможных подходов. Что если у меня 30 столбцов, а не только несколько? А как насчет атрибутов? Добавлять все это через javascript - значит делать одну и ту же работу дважды, И, кроме того, мне придется внедрять дополнительную логику, чтобы HTML в javascript выглядел так же, как в django.

Вопрос в том, есть ли какой-то метод, который я могу использовать, чтобы не писать одно и то же дважды, но при этом иметь возможность работать с websockets и добавлять элементы на страницу динамически?

Вернуться на верх