Обратный звонок для детского просмотра позвоночника?

Question

Я все время искал это, я не могу найти четкое решение.

У меня есть chatView, который отображает коллекциюView сообщений (messagesView). Мне нужно дождаться, пока все сообщения будут извлечены и отображены до того, как я смогу запустить функцию, чтобы прокручивать ее до нижней части списка сообщений.

Вот урезанная версия моего кода.

var socket    = io.connect(), 
    Marionette   = require('backbone.marionette'), 
    MessagesCollection = require('../collections/messages'), 
    MessagesView  = require('./messages'), 
    MessageModel  = require('../models/message'); 

module.exports = ChatView = Marionette.CompositeView.extend({ 

    className: 'chat col-sm-9', 
    template: require('../../templates/chat.hbs'), 
    events: { 
     'focusin input.message': 'userTyping', 
     'focusout input.message': 'userNotTyping', 
     'submit #chat-form': 'sendMessage' 
    },      

    initialize: function() { 

     var self = this; 

     /* Make an instance of the collection for the specific chat */ 
     window.messages = new MessagesCollection([], { chat_id: this.options.chatRoom }); 
     messages.fetch({ 
      success: function(models) { 
       App.data.messages = messages; 
       _.delay(function() { 
        self.scrollChat(); 
       }, 1000); 
      } 
     }); 

     // The view for a collection of messages 
     window.messagesView = new MessagesView({ collection: messages }); 

     /* Create an instance of a specific room for client to admin chat */ 
     socket.emit('createRoom', this.options.chatRoom); 

     /* Resize the chat when the window changes */ 
     $(window).on("resize", this.scrollChat); 

    },   

    onRender: function() { 

     /* Render all the messages inside the chatbox */ 
     var $chatbox = this.$el.find('.message-content'); 
     $chatbox.append(messagesView.render().$el); 

     window.App.core.vent.trigger('app:log', 'Chat View: chat view was rendered!'); 

    }, 


    scrollChat: function() { 

     var $headerNav = $('.navbar').outerHeight(); 
     var $typeMessage = $('.type-message').outerHeight(); 
     var $extraHeight = $headerNav + $typeMessage; 

     $('.chat').height($(window).height() - $headerNav); 
     $('.message-content').height($(window).height() - $extraHeight); 

     var pane = $('.message-content'); 
     pane.jScrollPane({ 
      autoReinitialise: true 
     }); 
     window.paneApi = pane.data('jsp'); 
     paneApi.scrollTo(0, $('.collection').height()); 

     if($(window).width() < 768) { 
      paneApi.destroy(); 
      $('.message-content').scrollTop(500); 
     } else { 
      paneApi.reinitialise(); 
     } 

    } 

}); 

Может быть, я должен переместить некоторые детали вокруг, но мне нужно получить определенный список сообщений, определяется по this.options.chatRoom, таким образом, мне нужно получить эти сообщения в пределах указанного выше вида.

Вопрос в том, что я должен установить _.delay в рамках метода выборки для имитации визуализацией сообщений, мы знаем, в success обратного вызова сообщения были получены, но представление не было вынесено, то есть функция scrollChat может 'правильно рассчитать.

Я спрашиваю, как подождать, пока весь список не будет передан в DOM, а затем выполнит.

Лучшее, что я мог найти, это использовать область марионетки, а затем использовать onShow, но мне нужно было бы пересказать код и скорее спросить об этом в первую очередь.

Надеюсь, что я был чист, это больше раздражает и хотел бы прокрутить чат правильно.

Answer 1

Oh yeah, collectionViews не имеют onShow методы.

Trigger точно. Но collectionViews должен иметь функцию onRender, которая вызывается после загрузки детей.

Попробуйте добавить эту строку здесь

this.listenTo(window.messagesView, "collection:rendered", self.scrollChat);