如何添加事件处理程序以路由Ember.js中显示的事件？

Question

I have a simple site in Ember.js that has this:

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

And template like 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 to make FancyBox so that when i click on the image it opens in new layer i normally call function:

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

Now i need to call it when main/sub is displayed. And this must be done after the template main/sub is displayed.

So how to bind event to template being displayed in order to call fancybox?

Answer 1

One possible way to do it would be by creating a MainSubView and hook into the didInsertElement function:

App.MainSubView = Ember.View.extend({
  didInsertElement: function() {
    $("a.fancyBox").fancybox();
  }
});

The didInsertElement function will be called when the view was inserted into the DOM.

Also worth mentioning is that if the call to fancybox() needs some clearing up after the view was removed from the DOM you would do this in didInsertElement 's counterpart hook willDestroyElement .

Example:

App.MainSubView = Ember.View.extend({
  didInsertElement: function() {
    $("a.fancyBox").fancybox();
  },
  willDestroyElement: function() {
    // remove here the displayed fancybox
  }
});

Hope it helps.