Порядок сообщений в чате без javascript с использованием bootstrap 4
Мне было интересно, есть ли способ настроить мое окно чата так, чтобы сообщения появлялись снизу, как работает любое приложение для чата. Я использую 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 %}
В списке идентификаторов имени есть overflow: auto.
Если я использую код без части rotation и без flex-column-reverse, список сообщений начинается с верхней части поля, что противоречит интуиции. Если я использую только flex-column-reverse, я получаю правильный порядок, но когда страница загружается, она загружается с самым старым сообщением, и пользователь должен прокручивать вниз, это также означает, что каждый раз, когда он пишет сообщение, он должен снова прокручивать вниз. Хак, который я использую, работает, показывая правильный порядок, и страница загружается в последнем сообщении, однако полоса прокрутки находится слева от окна чата и работает в обратном порядке с помощью прокрутки мыши.
Я добавил финальный скриншот. Есть ли решение без использования javascript? Я действительно ужасно понимаю javascript: ÷
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 класса 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. Думаю, вам может пригодиться этот вопрос.
Вы переопределяете шаблон пакета или работаете со своим собственным представлением?
Я отменяю шаблон пакета. Вид нетронутый.
ваше последнее редактирование хорошее, использование реверсирования почти то же самое, что и обратный столбец в css, я постараюсь взглянуть на ссылку на ваш вопрос. Я видел это раньше, но это слишком сложно. Но, по-видимому, нет решения, использующего только css.
честно говоря, я использовал пакет django-talk и пытался обновить его для себя, но мне было сложно понять их код, поэтому я пытаюсь отключить сортировку в шаблоне. Не хочу возиться с посылкой и получать сюрпризы.