mercredi 25 novembre 2015

how to scrolled to DOWN after updating the properties using ember

I am using ember view, once the page loads i want to scroll down to the page.In view didInsertElement will call and make the page load to scroll down, here is my code 

 App.MessagesView = Ember.View.extend({
  didInsertElement: function() {
    this._super();
    var $target = $('.chat-area .chat-list')
    ,   height = 0;
    if ($target) {
        $target.each(function(i, items_list) {
            $(items_list).find('li').each(function() {
                console.log($(this).height());
                height = height + parseInt($(this).height());
            });
        });
        $target.animate({ scrollTop: height});
    }
}

But once in controller if new other messages are loaded, because the view is already loaded ,the scroll bar is not scrolling down to the page.for the other message. the new messages are updated to the computed property and i want to call after the DOM messages are updated and call scrolldown code.

  App.MessagesController = Ember.ArrayController.extend({
    newmsgsCaptured: function(uuid) {
       this.setProperties({
                'newSelectedMessages': response,

            });

            var $target = $('.chat-area .chat-list')
            ,   height = 0;
            if ($target) {
                $target.each(function(i, items_list) {
                    $(items_list).find('li').each(function() {
                         console.log($(this).height());
                        height = height + parseInt($(this).height());
                    });
                });
                console.log(height);
                $target.animate({ scrollBottom: height});
            }

     } 
});

after calling newmsgsCaptured 'acction', the property is updated with new data and the scrolled down is not working.




Aucun commentaire:

Enregistrer un commentaire