Emberjs + Handlebars + Object exchange and events

Question

I find that jQuery observers are not tied to elements that are not displayed in the descriptor logic.

Say I have the following:

{{#if person}} Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>! {{else}} Please <a class="login">log in</a>. {{/if}} <script> $('.login').click(function() { alert("Hi there."); }); </script> 

If I run the console, person = null (or all that is necessary to convince that the person is empty) - the login observer does not work. I already use embers didInsertElement () to load a few other things, but is there an “onChange” event that I can connect to so that I can repeat events from event observers?

Answer 1

The big question is, why do you want this? Ember has great built-in support for click handlers without going through jQuery. The reason your <script> not working will most likely be due to the deferred way that ember inserts views into the DOM. When you execute Ember.View.append() , the element is inserted into the DOM later.

So here is a fiddle that does what I think you want to link the jQuery click handler in didInsertElement() .

http://jsfiddle.net/algesten/5LPPz/1/

 didInsertElement: function () { // appending click handler directly with jQuery $('.login').click(function() { alert("Hi there."); }); } 

However, the ember path would have to use the function of the implicit click handler:

http://jsfiddle.net/algesten/5LPPz/2/

 click: function () { alert("Hi there."); } 

NB The last handler attaches to the surrounding div handle, not to a , but clicks the bubble.

Answer 2

The problem is that javascript can only communicate with elements that exist in dom. When you add a new item, it wants you to re-bind these events. Fortunately, jQuery is your friend on that.

 <script> $('body').on('click', '.login', function() { alert("Hi there."); }); </script> 

Ideally, your selector is the closest parent to .login , which is not added by javascript. The above is safe if you are not sure.