WedX - журнал о программировании и компьютерных науках

Rails Action Cable прокручивается вниз после публикации сообщения

Я настроил кабель действия, теперь я хотел бы использовать следующую функцию js

$('.scroll-bar').scrollTop(row);

прокрутить чат вниз после отправки сообщения

Action Cable Chat

Поэтому я попытался включить предыдущий код как в app/assets/channels/messages.js, так и в app/assets/javascripts/room.js.

Проблема в том, что после того, как я выполню app/assets/channels/messages.js, в html не будет добавлен новый тег <p></p>.

App.messages = App.cable.subscriptions.create('MessagesChannel', {  
  received: function(data) {
    $("#messages").removeClass('hidden')
    return $('#messages').append(this.renderMessage(data));
  },
  renderMessage: function(data) {
    return "<p> <b>" + data.user + ": </b>" + data.message + "</p>";
  }
});

Это мои сообщения в чате, я не могу запустить .scrollTop(row) в несуществующей строке.

Я проверил, и теги <p> добавляются после messages.js.

птэги

Я нашел временное решение для решения этой проблемы, комментируя возврат из return $('#messages').append(this.renderMessage(data)); и вызывая после метода .scrollTop(row). Решение работает, но таким образом к странице добавляется только html без тегов <p>. Почему-то renderMessage работает неправильно.

Я доступен для любой информации

Большое спасибо, Фабрицио Бертольо.

ruby-on-rails javascript jquery ruby-on-rails-5 actioncable
15.06.2017

Ответы:


1

Это мое временное решение, которое работает неправильно, потому что я не буду добавлять тег <p>, а просто текст.

В основном так я просто добавляю html без "<p> <b>" + data.user + ": </b>" + data.message + "</p>"

На картинке ниже видно, что сообщение не находится внутри <p> тегов.

Пример HTML

Это то, что я сделал, я прокомментировал возврат для выполнения функции .scrollTop() после $('#messages').append(this.renderMessage(data));

app/assets/channels/messages.js

App.messages = App.cable.subscriptions.create('MessagesChannel', {  
  received: function(data) {
    $("#messages").removeClass('hidden');
    $('#messages').append(this.renderMessage(data));
    height = $('.scroll-bar')[0].scrollHeight;
    $('.scroll-bar').scrollTop(height);
    /*return $('#messages').append(this.renderMessage(data));*/
  },
  renderMessage: function(data) {
    return "<p> <b>" + data.user + ": </b>" + data.message + "</p>";
  }
});

Я думаю, что решение слышите, из этого сообщения я следовал, чтобы реализовать кабель действия, я не понимаю кто напрямую звонит received: function(data) {}

это метод обратного вызова subscribed внутри messages_channel.rb?

class MessagesChannel < ApplicationCable::Channel 
    def subscribed
        stream_from 'messages'
    end 
end

У меня нет четкого представления о том, как этот метод callback вызывает другой метод и как работает приложение.

Кабель действий Heroku введите здесь описание изображения

15.06.2017
Новые материалы
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
Для любых предложений по сайту: [email protected]