javascript - 如何添加事件处理程序以路由 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();
  }
});

该didInsertElement函数将在视图插入 DOM 时调用。

另外值得一提的是，如果在视图从 DOM 中删除后调用fancybox()需要进行一些清理，您可以在对应didInsertElement的钩子中执行此操作willDestroyElement。

例子：

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

希望能帮助到你。