在 EmberJS 渲染模板后如何捕获事件？答案

【问题标题】：How can catch event after template is rendered at EmberJS?在 EmberJS 渲染模板后如何捕获事件？
【发布时间】：2013-08-01 02:11:26
【问题描述】：

我有一个使用 masonry 和 Ember JS 的应用程序我尝试通过选择器搜索 DOM 元素，但它检索到 null 似乎我在模板渲染之前就这样做了。请帮我解决它。

【问题讨论】：

标签： ember.js

【解决方案1】：

@GJK 答案是正确的，我只想提供一个工作示例：http://jsbin.com/enijad/3/edit

App.IndexView = Ember.View.extend({
  didInsertElement: function() {
    var $container = $('#container');
    $container.masonry({
      columnWidth: 150,
      itemSelector: '.item'
    });
  }
});

didInsertElement 函数将在视图插入 DOM 时被调用，因此可以安全地初始化额外的库。

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

例子：

App.IndexView = Ember.View.extend({
  didInsertElement: function() {
    // do initialization here
  },
  willDestroyElement: function() {
    // and here you can remove stuff safely
  }
});

希望对你有帮助。

【讨论】：

感谢您的示例和广泛的回答
感谢您的示例。我会提供一个，但我知道语法是错误的，而且我无权访问我的代码库。
这很棒@intuitivepixel。非常感谢:)

【解决方案2】：

为你的 Route 和 Template 创建一个对应的 View，然后重写 didInsertElement 方法。

【讨论】：

很烦你必须这样做。这个路由器模板的东西应该只是一个组件，并且有 didInsertElement 等
Ember 为您控制 DOM 的想法是，它希望您尽可能少地手动操作 DOM。有时由于第三方插件是必要的，但 99% 的时间 didInsertElement() 是反模式。