Порядок сообщений в окне чата без JavaScript с помощью начальной загрузки 4

Question

Мне было интересно, есть ли способ настроить окно чата таким образом, чтобы сообщения появлялись снизу, как любое приложение чата.Я использую Django и bootstrap 4, вот мой код:

                            <div class="list-group flex-column-reverse " id="Chatting" style="transform: rotate(-180deg);">

{% for message in object.messages.all %}

    <a class="list-group-item list-group-item-action border-white "  {% if message.user == user  %} style="background-color: rgba(190,229,235,0.1);"{% endif %}>
        <div class="row text-lowercase" style="height: 15px;">
        <div class="col text-left">
            <p style="font-size: 10px;">{{ message.user.first_name }} {{ message.user.last_name|slice:":1" }}</p>
        </div>
        <div class="col">
            <p class="text-right" style="font-size: 10px;">{{ message.date|date:"SHORT_DATETIME_FORMAT" }}</p>
        </div>
        </div><span>

        {{ message.text|linebreaks }}
        {% if message.attachment %}
            <img src="{{ message.attachment.url }}" width="50%"  ></img>
        {% endif %}
    </span>
    </a>


{% endfor %}

В списке идентификаторов имени переполнено: auto.Если я использую код без части rotation и без flex-column-reverse, список сообщений начинается с верхней части окна, что нелогично.Если я использую только flex-column-reverse, я получаю правильное упорядочение, но когда страница загружается, она загружается самым старым сообщением, и пользователь должен прокручивать страницу вниз, это также означает, что каждый раз, когда он пишет сообщение, он должен снова прокручивать страницу вниз.Используемый мной хак работает, показывая правильный порядок и страница загружается при последнем сообщении, однако полоса прокрутки находится слева от окна чата и работает в обратном порядке с помощью прокрутки мыши.Я добавил финальный скриншот.Есть ли решение без использования JavaScript?Я действительно ужасен в понимании JavaScript: ÷

Answer 1

Я бы сделал это в виде вместо шаблона.Я предлагаю следующее (если вы используете представления на основе классов, я бы перегрузил метод get_context_data, чтобы добавить сообщения, отсортированные так, как я хочу:

def get_context_data(self, **kwargs):
    context = super(). get_context_data(**kwargs)
    # Now we add messages sorted in ascending order by date
    # I'm assuming you are using some kind of DetailView or similar
    # which has an 'object' field
    context['messages'] = self.object.messages.order_by('date')

    return context

Затем в вашем шаблоне вы должны выполнить итерациюmessages переменная напрямую вместо object.messages.all.

Более того, если вы обычно хотите, чтобы сообщения в таком порядке, я добавил бы это к атрибуту Meta class orderingВаша Message модель выглядит так:

class Message(Model):
    # whatever is your model

    class Meta:
        ordering = ['date']

В соответствии с вашим последним комментарием я бы тогда предложил вам просто выполнить итерацию списка в обратном порядке ( взгляните на эту часть документации ). Подводя итог, вы должны:

{% for message in obj.messages.all reversed %}
    <!-- Do whatever you want to render your messages --!>
{% endfor %}

Для удержания прокрутки вниз вам понадобится трюк с JS или CSS. Я думаю, вы можете найти этот вопрос полезным.