如何将点击事件绑定到加载异步数据后显示的元素？答案

【问题标题】：How do i bind click events to elements, which is shown after async data is loaded?如何将点击事件绑定到加载异步数据后显示的元素？
【发布时间】：2014-05-20 15:52:07
【问题描述】：

在我的路线中，我正在获取一些产品。

  setupController: (controller, model) ->
    controller.set('model', model)
    controller.set('commissionLines', @store.find('commissionLine'))
    controller.set 'products', @store.find('product')

产品显示在我的车把模板中，我使用每个循环打印它们。每个产品的描述，我想隐藏，直到产品被点击。所以我添加了一个视图，它观察控制器中的产品，并相应地添加点击事件。

MyApp.PropperViewNameView = Ember.View.extend
  applyClick: ( =>
    @$('.button.expand').click (e) =>
      @$(@).parent('tr').next().transition('slide down')
  ).observes('controller.products')

不幸的是没有发生绑定，如果我在应用点击方法中添加“调试器”，我可以看到它在 html 呈现之前被触发。

如何正确附加我的绑定？

【问题讨论】：

标签： ember.js coffeescript

【解决方案1】：

所以我实际上在编写它时解决了这个问题，就像考虑运行循环一样。问题是在模板的把手绑定之前触发了观察。所以我需要在之后运行我的点击事件，这是通过告诉 ember 在下一个运行循环中运行你的代码来完成的，你可以使用“Ember.run.next”来做到这一点。

所以我的视图代码现在看起来像这样。

  applyClick: ( ->
    Ember.run.next =>
      @$('.button.expand').click (e) =>
        @$(@).parent('tr').next().transition('slide down')
  ).observes('controller.products')

这里是js

  applyClick: function() {
    _this = this
    Ember.run.next(function() {
      _this.$('.button.expand').click(function(e) {
        _this.$(_this).parent('tr').next().transition('slide down');
      });
    });
  }.observes('controller.products'),

如果有更简洁的方法，请随时加入。

【讨论】：