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();

现在我需要在显示main / sub时调用它。这必须在显示模板main / sub后完成。

那么如何将事件绑定到显示的模板以调用fancybox？

Answer 1

一种可行的方法是创建一个MainSubView并挂钩didInsertElement函数：

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

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

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

示例：

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

希望它有所帮助。

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

1 个答案: