CODEWITHSUNDEEP
jqueryember.jsjquery-events
Dmitro
Dmitro

Reputation: 1549

How to trigger event in View Ember.js?

I have connection to socket.io server in my router.

afterModel: function () {
        var self = this;

        socket.on('message', function (message) {
            // adding message to Ember.DS 
        }
}

Ember appends messages to div, but when scroll is become to show I need to makes Ember scrolls it down. I can do it with jQuery like that

Ember.$('.messages-area').scrollTop(1000000);

But where do I need to bind event listener for this action?

Upvotes: 0

Views: 1342

Answers (3)

Dmitro
Dmitro

Reputation: 1549

I needed to observ chaning of model and after changing to add scroll down into the Ember run loop.

recordsDidChanges: function(){
    Ember.run.schedule('afterRender',this, function(){
        var msgArea = $('.messages-area');
        if (msgArea[0]) {
            msgArea.scrollTop(msgArea[0].scrollHeight);
        }
    });
}.observes('controller.records.@each')

Upvotes: 0

Susai
Susai

Reputation: 565

Ember not encourages event binding, instead it captures user events by event delegation.

In your case, you can place your code at View.

For example, assume i have a application template:

<div id="div1">Click this area</div>
<div id="div2">Click this area</div>

Then you can capture click event in ApplicationView like,

click:function(event){ 
   if(event.target.attr('id')==='div1'){
         //do stuff here
   }
}

Upvotes: 0

Stephen Wright
Stephen Wright

Reputation: 2956

Depending on how you do this, you can use an action handler - see here: Ember - handling actions in views

A full list of view event handlers is here:

http://emberjs.com/api/classes/Ember.View.html#toc_event-names

If you can utilize one of the pre-defined handlers, it would undoubtedly be cleaner logic, However, it sounds like you probably can't do that as you're not directly inputting the text into the div via user interaction. What you would then need to do, is in your didInsertElement method, have a jQuery loop that checks the contents of the div being updated, and then runs the scroll when the content is updated.

Upvotes: 1

Related Questions