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

Question

我在Ember.js中有一個簡單的網站，它具有以下功能：

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

和這樣的模板：

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

現在為了制作FancyBox，以便當我單擊圖像時它在新層中打開，我通常調用函數：

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

現在我需要在顯示主/子時調用它。 並且必須在顯示模板主/子之后完成。

那么如何將事件綁定到要顯示的模板以便調用fancybox？

Answer 1

一種可能的方法是創建MainSubView並連接到didInsertElement函數：

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

將視圖插入DOM時，將調用didInsertElement函數。

還值得一提的是，如果從DOM中刪除視圖后，對fancybox()的調用需要進行一些清理，則可以在didInsertElement的對應鈎子willDestroyElement 。

例：

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

希望能幫助到你。