javascript - How to add event handler to route displayed event in Ember.js? -

i have simple site in ember.js has this:

app.router.map(function() {   this.resource('main', { path: '/main' });     this.route('sub', { path: '/sub' }); 

and template this:

  <script type="text/x-handlebars" data-template-name="main/sub">       <a href='image.jpg' class='fancybox'><img src='image.jpg'></a>   </script> 

now in order make fancybox when click on image opens in new layer call function:

$("a.fancybox").fancybox(); 

now need call when main/sub displayed. , must done after template main/sub displayed.

so how bind event template being displayed in order call fancybox?

one possible way creating mainsubview , hook didinsertelement function:

app.mainsubview = ember.view.extend({   didinsertelement: function() {     $("a.fancybox").fancybox();   } }); 

the didinsertelement function called when view inserted dom.

also worth mentioning if call fancybox() needs clearing after view removed dom in didinsertelement's counterpart hook willdestroyelement.

example:

app.mainsubview = ember.view.extend({   didinsertelement: function() {     $("a.fancybox").fancybox();   },   willdestroyelement: function() {     // remove here displayed fancybox   } }); 

hope helps.