Question

我一直在谷歌寻找这个，我无法提出一个明确的解决方案。

我有一个chatView，它呈现一个消息的collectionView（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定义的特定消息列表，因此我需要在上面的视图中获取这些消息。

问题是我必须在fetch方法中设置一个_.delay来模拟消息的呈现，我们知道在success回调中已经检索到消息但是视图没有＆＃39;已被渲染，这意味着scrollChat函数无法正确计算。

我问我应该怎么等到整个列表都被渲染到DOM然后执行。

我能找到的最好的是使用木偶区域，然后使用onShow，但我必须重新考虑一些代码，而不是先问这个。

希望我很清楚，这更令人烦恼，并且想要正确滚动聊天。

Answer 1

哦，是的，collectionViews没有onShow方法。

完全触发。但是collectionViews应该有一个onRender函数，在孩子加载后调用它。

尝试在此处添加此行

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

骨干子视图的回调？

1 个答案: