Question

There is a chat, and when new message comes in it needs to scroll down. This works fine.

But when app is loaded some portion of messages are preloaded (about 100 of them) via setting the ‘content’ of the ArrayController, so scrolling down will be called 100 times which is not good. What is the right way to run scroll just once for the first big portion of data?

Here is some code http://jsfiddle.net/agentcooper/W6Bhs/

Answer 1

You could create a scroll function which is fired when your content changes, see http://jsfiddle.net/pangratz666/zZ5Cc. So you’d basically pull up the scrolling behavior from the view which holds a single message to the view which holds all messages.

Handlebars:

<script type="text/x-handlebars">
  {{#view App.MessagesView class="message-list" messagesBinding="App.messages" }}
  <ul class="nav nav-list">
  {{#each messages}}
    {{#view App.MessageView contentBinding="this" tagName="li"}}
      {{unbound content.from}}: {{unbound content.message}}
    {{/view}}
  {{/each}}
  </ul>
  {{/view}}
</script>

JavaScript:

App.MessagesView = Ember.View.extend({
    didInsertElement: function() {
        this.scroll();
    },

    messagesChanged: function() {
        var that = this;
        // invoke this code in the next RunLoop, when changes are made to DOM
        Ember.run.next(function() {
            that.scroll();
        });
    }.observes('messages.@each'),

    scroll: function() {
        console.log('scroll');
        var el = this.$();
        el.scrollTop(el.prop('scrollHeight'));
    }
});